制作基于sass（s​​css）的网格 - 如何使用一个声明创建一个类名列表

Question

所以我创建了一个非常简单的网格，并希望限制重复声明的数量。

我的Scss网格

$columns: 12;
$margin: 10;
$max-width: 1200;

// do not edit these values
$layout-margin-width: $max-width + $margin * 2;
$percent-margin: $margin / $layout-margin-width;

// Grid Container
.main {
    max-width: $max-width + px;
    margin: 0 auto;
        &:before,
        &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

// Grid Columns
@for $i from 1 through $columns {
    .grid-#{$i} {
        width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
        padding: 0;
        margin: 0 $percent-margin * 100%;
        float: left;
    }
}

哪些输出到

.main { max-width: 1200px; margin: 0 auto; }
.main:before, .main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.grid-1 { width: 6.69399%; padding: 0; margin: 0 0.81967%; float: left; }

//

.grid-12 { width: 98.36066%; padding: 0; margin: 0 0.81967%; float: left; }

这会产生很多重复的CSS，所以我希望能够将一个网格类名称列在一起，并在一个声明中使用float：left等，就像这样

.grid-1,
.grid-2,
//
.grid-12 {
    float:left;
    //other declarations
}

如何构建Scss循环来执行此操作？

Answer 1

我认为您可以使用@extend执行此类操作。

示例

%grid {
   float:left;
}

@for $i from 1 through $columns {
    .grid-#{$i} {
        width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
        padding: 0;
        margin: 0 $percent-margin * 100%;
        @extend: %grid;
    }
}

这将输出你的css。

.grid-1,
.grid-2,
.grid-3 {
    float: left;
}