[英]SASS CSS repeat variable in for loop
I'm writing some SASS to output several column/row combinations for a grid.我正在编写一些 SASS 来输出网格的多个列/行组合。 It works fine in modern browsers because they all know how to use CSS' repeat()
function.它在现代浏览器中运行良好,因为它们都知道如何使用 CSS 的repeat()
函数。 But of course, I have to develop for IE11 and Edge...但当然,我必须为 IE11 和 Edge 开发......
I have this function that outputs all combinations between 1-12 columns and 1-24 rows (yes, it's a lot of output, but it's necessary).我有这个函数可以输出 1-12 列和 1-24 行之间的所有组合(是的,这是很多输出,但这是必要的)。
.grid-container {
width:calc(100% + 10px);
margin-left:-5px;
margin-top:-5px;
position:relative;
&.s {
@for $column from 1 through 12 {
@for $row from 1 through 24 {
&#{$column}x#{$row} {
.grid {
-ms-grid-columns: 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr;
-ms-grid-rows: 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr;
grid-template-columns: repeat($column, calc((100% / #{$column})));
grid-template-rows: repeat($row, calc((100% / #{$row})));
grid-column-gap: 0px;
grid-row-gap: 0px;
}
}
}
}
}
}
Now, I'm trying to figure out how to make the -ms-grid-columns
and -ms-grid rows
dynamic.现在,我试图弄清楚如何使-ms-grid-columns
和-ms-grid rows
动态化。 Right now, it's just built for a 12x12 grid, but I want them to have the correct number of fr
units depending on the outputted grid size.现在,它只是为 12x12 网格构建的,但我希望它们根据输出的网格大小具有正确数量的fr
单位。
I found out LESS has a merge
function that would work perfectly, but I don't know what that is in SASS我发现 LESS 有一个可以完美运行的merge
功能,但我不知道 SASS 是什么
You can simply recursively append something to a variable:您可以简单地递归地将某些内容附加到变量:
@function columns($n) {
$thing: '';
@for $count from 1 through $n {
$thing: #{$thing} 1fr;
}
@return $thing;
}
You have to separate the row
and column
.您必须将row
和column
分开。 Also you have to use AutoPrefixer with postcss for -ms
prefix.此外,您必须将 AutoPrefixer 与 postcss 一起用于-ms
前缀。 Demo check Autoprefixer online .在线演示检查Autoprefixer 。
@for $col from 1 through 12{
.grid-col-#{$col}{
grid-template-columns: repeat($col, calc(100% / #{$col}));
}
}
@for $row from 1 through 24{
.grid-row-#{$row}{
grid-template-rows: repeat($row, calc(100% / #{$row}));
}
}
CSS output with Autoprefixer带有Autoprefixer 的CSS 输出
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
.grid-col-1 {
-ms-grid-columns: (-webkit-calc(100% / 1))[1];
-ms-grid-columns: (-moz-calc(100% / 1))[1];
-ms-grid-columns: (calc(100% / 1))[1];
grid-template-columns: repeat(1, -webkit-calc(100% / 1));
grid-template-columns: repeat(1, -moz-calc(100% / 1));
grid-template-columns: repeat(1, calc(100% / 1));
}
.grid-col-2 {
-ms-grid-columns: (-webkit-calc(100% / 2))[2];
-ms-grid-columns: (-moz-calc(100% / 2))[2];
-ms-grid-columns: (calc(100% / 2))[2];
grid-template-columns: repeat(2, -webkit-calc(100% / 2));
grid-template-columns: repeat(2, -moz-calc(100% / 2));
grid-template-columns: repeat(2, calc(100% / 2));
}
.grid-col-3 {
-ms-grid-columns: (-webkit-calc(100% / 3))[3];
-ms-grid-columns: (-moz-calc(100% / 3))[3];
-ms-grid-columns: (calc(100% / 3))[3];
grid-template-columns: repeat(3, -webkit-calc(100% / 3));
grid-template-columns: repeat(3, -moz-calc(100% / 3));
grid-template-columns: repeat(3, calc(100% / 3));
}
.grid-col-4 {
-ms-grid-columns: (-webkit-calc(100% / 4))[4];
-ms-grid-columns: (-moz-calc(100% / 4))[4];
-ms-grid-columns: (calc(100% / 4))[4];
grid-template-columns: repeat(4, -webkit-calc(100% / 4));
grid-template-columns: repeat(4, -moz-calc(100% / 4));
grid-template-columns: repeat(4, calc(100% / 4));
}
.grid-col-5 {
-ms-grid-columns: (-webkit-calc(100% / 5))[5];
-ms-grid-columns: (-moz-calc(100% / 5))[5];
-ms-grid-columns: (calc(100% / 5))[5];
grid-template-columns: repeat(5, -webkit-calc(100% / 5));
grid-template-columns: repeat(5, -moz-calc(100% / 5));
grid-template-columns: repeat(5, calc(100% / 5));
}
.grid-col-6 {
-ms-grid-columns: (-webkit-calc(100% / 6))[6];
-ms-grid-columns: (-moz-calc(100% / 6))[6];
-ms-grid-columns: (calc(100% / 6))[6];
grid-template-columns: repeat(6, -webkit-calc(100% / 6));
grid-template-columns: repeat(6, -moz-calc(100% / 6));
grid-template-columns: repeat(6, calc(100% / 6));
}
.grid-col-7 {
-ms-grid-columns: (-webkit-calc(100% / 7))[7];
-ms-grid-columns: (-moz-calc(100% / 7))[7];
-ms-grid-columns: (calc(100% / 7))[7];
grid-template-columns: repeat(7, -webkit-calc(100% / 7));
grid-template-columns: repeat(7, -moz-calc(100% / 7));
grid-template-columns: repeat(7, calc(100% / 7));
}
.grid-col-8 {
-ms-grid-columns: (-webkit-calc(100% / 8))[8];
-ms-grid-columns: (-moz-calc(100% / 8))[8];
-ms-grid-columns: (calc(100% / 8))[8];
grid-template-columns: repeat(8, -webkit-calc(100% / 8));
grid-template-columns: repeat(8, -moz-calc(100% / 8));
grid-template-columns: repeat(8, calc(100% / 8));
}
.grid-col-9 {
-ms-grid-columns: (-webkit-calc(100% / 9))[9];
-ms-grid-columns: (-moz-calc(100% / 9))[9];
-ms-grid-columns: (calc(100% / 9))[9];
grid-template-columns: repeat(9, -webkit-calc(100% / 9));
grid-template-columns: repeat(9, -moz-calc(100% / 9));
grid-template-columns: repeat(9, calc(100% / 9));
}
.grid-col-10 {
-ms-grid-columns: (-webkit-calc(100% / 10))[10];
-ms-grid-columns: (-moz-calc(100% / 10))[10];
-ms-grid-columns: (calc(100% / 10))[10];
grid-template-columns: repeat(10, -webkit-calc(100% / 10));
grid-template-columns: repeat(10, -moz-calc(100% / 10));
grid-template-columns: repeat(10, calc(100% / 10));
}
.grid-col-11 {
-ms-grid-columns: (-webkit-calc(100% / 11))[11];
-ms-grid-columns: (-moz-calc(100% / 11))[11];
-ms-grid-columns: (calc(100% / 11))[11];
grid-template-columns: repeat(11, -webkit-calc(100% / 11));
grid-template-columns: repeat(11, -moz-calc(100% / 11));
grid-template-columns: repeat(11, calc(100% / 11));
}
.grid-col-12 {
-ms-grid-columns: (-webkit-calc(100% / 12))[12];
-ms-grid-columns: (-moz-calc(100% / 12))[12];
-ms-grid-columns: (calc(100% / 12))[12];
grid-template-columns: repeat(12, -webkit-calc(100% / 12));
grid-template-columns: repeat(12, -moz-calc(100% / 12));
grid-template-columns: repeat(12, calc(100% / 12));
}
.grid-row-1 {
-ms-grid-rows: (-webkit-calc(100% / 1))[1];
-ms-grid-rows: (-moz-calc(100% / 1))[1];
-ms-grid-rows: (calc(100% / 1))[1];
grid-template-rows: repeat(1, -webkit-calc(100% / 1));
grid-template-rows: repeat(1, -moz-calc(100% / 1));
grid-template-rows: repeat(1, calc(100% / 1));
}
.grid-row-2 {
-ms-grid-rows: (-webkit-calc(100% / 2))[2];
-ms-grid-rows: (-moz-calc(100% / 2))[2];
-ms-grid-rows: (calc(100% / 2))[2];
grid-template-rows: repeat(2, -webkit-calc(100% / 2));
grid-template-rows: repeat(2, -moz-calc(100% / 2));
grid-template-rows: repeat(2, calc(100% / 2));
}
.grid-row-3 {
-ms-grid-rows: (-webkit-calc(100% / 3))[3];
-ms-grid-rows: (-moz-calc(100% / 3))[3];
-ms-grid-rows: (calc(100% / 3))[3];
grid-template-rows: repeat(3, -webkit-calc(100% / 3));
grid-template-rows: repeat(3, -moz-calc(100% / 3));
grid-template-rows: repeat(3, calc(100% / 3));
}
.grid-row-4 {
-ms-grid-rows: (-webkit-calc(100% / 4))[4];
-ms-grid-rows: (-moz-calc(100% / 4))[4];
-ms-grid-rows: (calc(100% / 4))[4];
grid-template-rows: repeat(4, -webkit-calc(100% / 4));
grid-template-rows: repeat(4, -moz-calc(100% / 4));
grid-template-rows: repeat(4, calc(100% / 4));
}
.grid-row-5 {
-ms-grid-rows: (-webkit-calc(100% / 5))[5];
-ms-grid-rows: (-moz-calc(100% / 5))[5];
-ms-grid-rows: (calc(100% / 5))[5];
grid-template-rows: repeat(5, -webkit-calc(100% / 5));
grid-template-rows: repeat(5, -moz-calc(100% / 5));
grid-template-rows: repeat(5, calc(100% / 5));
}
.grid-row-6 {
-ms-grid-rows: (-webkit-calc(100% / 6))[6];
-ms-grid-rows: (-moz-calc(100% / 6))[6];
-ms-grid-rows: (calc(100% / 6))[6];
grid-template-rows: repeat(6, -webkit-calc(100% / 6));
grid-template-rows: repeat(6, -moz-calc(100% / 6));
grid-template-rows: repeat(6, calc(100% / 6));
}
.grid-row-7 {
-ms-grid-rows: (-webkit-calc(100% / 7))[7];
-ms-grid-rows: (-moz-calc(100% / 7))[7];
-ms-grid-rows: (calc(100% / 7))[7];
grid-template-rows: repeat(7, -webkit-calc(100% / 7));
grid-template-rows: repeat(7, -moz-calc(100% / 7));
grid-template-rows: repeat(7, calc(100% / 7));
}
.grid-row-8 {
-ms-grid-rows: (-webkit-calc(100% / 8))[8];
-ms-grid-rows: (-moz-calc(100% / 8))[8];
-ms-grid-rows: (calc(100% / 8))[8];
grid-template-rows: repeat(8, -webkit-calc(100% / 8));
grid-template-rows: repeat(8, -moz-calc(100% / 8));
grid-template-rows: repeat(8, calc(100% / 8));
}
.grid-row-9 {
-ms-grid-rows: (-webkit-calc(100% / 9))[9];
-ms-grid-rows: (-moz-calc(100% / 9))[9];
-ms-grid-rows: (calc(100% / 9))[9];
grid-template-rows: repeat(9, -webkit-calc(100% / 9));
grid-template-rows: repeat(9, -moz-calc(100% / 9));
grid-template-rows: repeat(9, calc(100% / 9));
}
.grid-row-10 {
-ms-grid-rows: (-webkit-calc(100% / 10))[10];
-ms-grid-rows: (-moz-calc(100% / 10))[10];
-ms-grid-rows: (calc(100% / 10))[10];
grid-template-rows: repeat(10, -webkit-calc(100% / 10));
grid-template-rows: repeat(10, -moz-calc(100% / 10));
grid-template-rows: repeat(10, calc(100% / 10));
}
.grid-row-11 {
-ms-grid-rows: (-webkit-calc(100% / 11))[11];
-ms-grid-rows: (-moz-calc(100% / 11))[11];
-ms-grid-rows: (calc(100% / 11))[11];
grid-template-rows: repeat(11, -webkit-calc(100% / 11));
grid-template-rows: repeat(11, -moz-calc(100% / 11));
grid-template-rows: repeat(11, calc(100% / 11));
}
.grid-row-12 {
-ms-grid-rows: (-webkit-calc(100% / 12))[12];
-ms-grid-rows: (-moz-calc(100% / 12))[12];
-ms-grid-rows: (calc(100% / 12))[12];
grid-template-rows: repeat(12, -webkit-calc(100% / 12));
grid-template-rows: repeat(12, -moz-calc(100% / 12));
grid-template-rows: repeat(12, calc(100% / 12));
}
.grid-row-13 {
-ms-grid-rows: (-webkit-calc(100% / 13))[13];
-ms-grid-rows: (-moz-calc(100% / 13))[13];
-ms-grid-rows: (calc(100% / 13))[13];
grid-template-rows: repeat(13, -webkit-calc(100% / 13));
grid-template-rows: repeat(13, -moz-calc(100% / 13));
grid-template-rows: repeat(13, calc(100% / 13));
}
.grid-row-14 {
-ms-grid-rows: (-webkit-calc(100% / 14))[14];
-ms-grid-rows: (-moz-calc(100% / 14))[14];
-ms-grid-rows: (calc(100% / 14))[14];
grid-template-rows: repeat(14, -webkit-calc(100% / 14));
grid-template-rows: repeat(14, -moz-calc(100% / 14));
grid-template-rows: repeat(14, calc(100% / 14));
}
.grid-row-15 {
-ms-grid-rows: (-webkit-calc(100% / 15))[15];
-ms-grid-rows: (-moz-calc(100% / 15))[15];
-ms-grid-rows: (calc(100% / 15))[15];
grid-template-rows: repeat(15, -webkit-calc(100% / 15));
grid-template-rows: repeat(15, -moz-calc(100% / 15));
grid-template-rows: repeat(15, calc(100% / 15));
}
.grid-row-16 {
-ms-grid-rows: (-webkit-calc(100% / 16))[16];
-ms-grid-rows: (-moz-calc(100% / 16))[16];
-ms-grid-rows: (calc(100% / 16))[16];
grid-template-rows: repeat(16, -webkit-calc(100% / 16));
grid-template-rows: repeat(16, -moz-calc(100% / 16));
grid-template-rows: repeat(16, calc(100% / 16));
}
.grid-row-17 {
-ms-grid-rows: (-webkit-calc(100% / 17))[17];
-ms-grid-rows: (-moz-calc(100% / 17))[17];
-ms-grid-rows: (calc(100% / 17))[17];
grid-template-rows: repeat(17, -webkit-calc(100% / 17));
grid-template-rows: repeat(17, -moz-calc(100% / 17));
grid-template-rows: repeat(17, calc(100% / 17));
}
.grid-row-18 {
-ms-grid-rows: (-webkit-calc(100% / 18))[18];
-ms-grid-rows: (-moz-calc(100% / 18))[18];
-ms-grid-rows: (calc(100% / 18))[18];
grid-template-rows: repeat(18, -webkit-calc(100% / 18));
grid-template-rows: repeat(18, -moz-calc(100% / 18));
grid-template-rows: repeat(18, calc(100% / 18));
}
.grid-row-19 {
-ms-grid-rows: (-webkit-calc(100% / 19))[19];
-ms-grid-rows: (-moz-calc(100% / 19))[19];
-ms-grid-rows: (calc(100% / 19))[19];
grid-template-rows: repeat(19, -webkit-calc(100% / 19));
grid-template-rows: repeat(19, -moz-calc(100% / 19));
grid-template-rows: repeat(19, calc(100% / 19));
}
.grid-row-20 {
-ms-grid-rows: (-webkit-calc(100% / 20))[20];
-ms-grid-rows: (-moz-calc(100% / 20))[20];
-ms-grid-rows: (calc(100% / 20))[20];
grid-template-rows: repeat(20, -webkit-calc(100% / 20));
grid-template-rows: repeat(20, -moz-calc(100% / 20));
grid-template-rows: repeat(20, calc(100% / 20));
}
.grid-row-21 {
-ms-grid-rows: (-webkit-calc(100% / 21))[21];
-ms-grid-rows: (-moz-calc(100% / 21))[21];
-ms-grid-rows: (calc(100% / 21))[21];
grid-template-rows: repeat(21, -webkit-calc(100% / 21));
grid-template-rows: repeat(21, -moz-calc(100% / 21));
grid-template-rows: repeat(21, calc(100% / 21));
}
.grid-row-22 {
-ms-grid-rows: (-webkit-calc(100% / 22))[22];
-ms-grid-rows: (-moz-calc(100% / 22))[22];
-ms-grid-rows: (calc(100% / 22))[22];
grid-template-rows: repeat(22, -webkit-calc(100% / 22));
grid-template-rows: repeat(22, -moz-calc(100% / 22));
grid-template-rows: repeat(22, calc(100% / 22));
}
.grid-row-23 {
-ms-grid-rows: (-webkit-calc(100% / 23))[23];
-ms-grid-rows: (-moz-calc(100% / 23))[23];
-ms-grid-rows: (calc(100% / 23))[23];
grid-template-rows: repeat(23, -webkit-calc(100% / 23));
grid-template-rows: repeat(23, -moz-calc(100% / 23));
grid-template-rows: repeat(23, calc(100% / 23));
}
.grid-row-24 {
-ms-grid-rows: (-webkit-calc(100% / 24))[24];
-ms-grid-rows: (-moz-calc(100% / 24))[24];
-ms-grid-rows: (calc(100% / 24))[24];
grid-template-rows: repeat(24, -webkit-calc(100% / 24));
grid-template-rows: repeat(24, -moz-calc(100% / 24));
grid-template-rows: repeat(24, calc(100% / 24));
}
HTML usage: HTML 用法:
<div class="grid-col-1 grid-row-1"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.