我使用sass制作网格,我使用下面的逻辑来定义多个屏幕和大小的列。
@each $breakpoint, $container-size in $grid-containers {
@include breakpoint($breakpoint){
@for $column from 1 through $grid-columns { /* This loop will define the columns */
@if map-get($grid-breakpoints, $breakpoint) != none{
.col-#{$breakpoint}-#{$column} {
flex-basis: percentage($column / $grid-columns);
padding-left: $grid-gutter;
padding-right: $grid-gutter;
}
}
@else {
.col-#{$column} {
flex-basis: percentage($column / $grid-columns);
padding-left: $grid-gutter;
padding-right: $grid-gutter;
}
}
}
}
}
现在我想将此代码转换为mixin并定义如下列:
@include column-rule(.col) {
flex-basis: percentage($column / $grid-columns); /* $column is undefined */
padding-left: $grid-gutter;
padding-right: $grid-gutter;
}
/* Another sample */
@include column-rule(.order) {
order: $column; /* $column is undefined */
}
但是你可以看到我需要使用变量$ column来定义循环。我可以使用mixin获取$ column的值吗?