如何在@mixin中使用@for

时间:2017-03-26 01:45:42

标签: css loops sass mixins preprocessor

我使用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的值吗?

0 个答案:

没有答案