製作一個基於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循環t o這樣做？

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; 
}