是否可以从变量中生成网格模板列中的列数？
我有一个变量 $num-of-cols: 5; 我用来创建类 whit scss 并且它工作正常，但我也想使用相同的变量来为 grid-template-columns 创建 cols。
如： grid-template-columns: [col-1] $width-cols [col-2] $width-cols [col-3] $width-cols [col-4] $width-cols [col-5] $宽度列 [col-6];
$width-cols 应该计算为 100%/$num-of-cols-$grid-gutter-width。（名称很重要，从 1 到 $num-of-cols）。
$grid-gutter-width: 1rem;
$num-of-cols: 5;
$width-cols: calc(100%/#{$num-of-cols} - #{$grid-gutter-width});
.grid {
display: grid;
grid-gap: $grid-gutter-width;
padding: $grid-gutter-width;
padding-right: 0;
grid-template-columns: [col-1] $width-cols [col-2] $width-cols [col-3] $width-cols [col-4] $width-cols [col-5] $width-cols [col-6];
grid-template-rows: auto;
}
您可以使用 mixin（或函数）——例如：
社会保障局
$grid-gutter-width: 1rem;
$num-of-cols: 5;
$width-cols: calc(100%/#{$num-of-cols} - #{$grid-gutter-width});
@mixin grid-template-columns {
$columns: [col-1],; // note trailing comma indicates list
@for $i from 2 through $num-of-cols + 1 {
$columns: append($columns, $width-cols [col-#{$i}], space);
}
grid-template-columns: $columns;
}
.grid {
display: grid;
grid-gap: $grid-gutter-width;
padding: $grid-gutter-width;
padding-right: 0;
@include grid-template-columns; // <= include
grid-template-rows: auto;
}
CSS
.grid {
display: grid;
grid-gap: 1rem;
padding: 1rem;
padding-right: 0;
grid-template-columns: [col-1] calc(100%/5 - 1rem) [col-2] calc(100%/5 - 1rem) [col-3] calc(100%/5 - 1rem) [col-4] calc(100%/5 - 1rem) [col-5] calc(100%/5 - 1rem) [col-6];
grid-template-rows: auto;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句