我有以下SCSS mixin,它生成从.grid1
到.grid12
的CSS类:
$columns: 12;
@mixin repeat($character, $n) {
$c: "";
@for $i from 1 through $n {
$c: $c + $character;
}
-ms-grid-columns: unquote($c);
}
// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
@for $i from 1 through $columns {
.grid#{$i} {
@include repeat(" 1fr", $i);
}
}
}
@include grid-x;
使用libsass生成的CSS类看起来像这样:
.grid1 {
-ms-grid-columns: 1fr;
}
.grid2 {
-ms-grid-columns: 1fr 1fr;
}
.grid3 {
-ms-grid-columns: 1fr 1fr 1fr;
}
...
由于IE 11不支持grid-gap
,我想在代中的列之间插入20px间隙列。
预期结果如下所示:
// nothing changed for .grid1
.grid1 {
-ms-grid-columns: 1fr;
}
.grid2 {
-ms-grid-columns: 1fr 20px 1fr;
}
.grid3 {
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
}
...
只需在重复字符串中添加20px
列会导致不必要的尾随20px
:
@include repeat(" 1fr 20px", $i);
结果是
.grid1 {
-ms-grid-columns: 1fr 20px;
} ^^^^
.grid2 {
-ms-grid-columns: 1fr 20px 1fr 20px;
}^ ^^^^
.grid3 {
-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px;
} ^^^^
...
为了便于测试,只需将mixins粘贴到sassmeister上即可。
你可以为差距包含另一个变量,并像这样做。
$columns: 12;
@mixin repeat($character, $gap, $n) {
$c: "";
@if ($n != 1) {
@for $i from 1 through ($n - 1) {
$c: $c+" "+$character+" "+$gap ;
}
}
$c: $c+" "+$character ;
-ms-grid-columns: unquote($c);
}
// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
@for $i from 1 through $columns {
.grid#{$i} {
@include repeat("1fr","20px", $i);
}
}
}
@include grid-x;
如果您在间隙中指定并清空字符串,这也会为您提供初始结果:
我能够使用@if () { } @else { }
自己解决它:
$columns: 12;
@mixin repeat($character, $n) {
$c: "";
@for $i from 1 through $n {
@if ($n == 1 or $i == $n) {
$c: $c + $character;
} @else {
$c: $c + $character + " 20px";
}
}
-ms-grid-columns: unquote($c);
}
// classes for defining number of equally sized (sub-)grid columns
@mixin grid-x {
@for $i from 1 through $columns {
.grid#{$i} {
@include repeat(" 1fr", $i);
}
}
}
@include grid-x;