Sass взаимные свойства для предметов

Question

Я создаю сетку с Sass. Я создал классы от .col1 до .col8. Теперь я хочу динамически сделать взаимный селектор (.col1, .col2, ..., .col8) для всех этих классов. Как я могу это сделать?

$siteWidth: 80em 
$columnCount: 8 
$columnWidth: $siteWidth/$columnCount 

@for $i from 1 through $columnCount 
    .col#{$i} 
    width: $columnWidth * $i 

Answer 1

Вы должны использовать placeholder, это Sass:

$siteWidth: 80em; 
$columnCount: 8; 
$columnWidth: $siteWidth/$columnCount; 

%col { 
    height: 10px; 
} 

.col1 { 
    @extend %col; 
} 

@for $i from 1 through $columnCount { 
    .col#{$i} { 
    @extend %col; 
    } 
} 

@for $i from 1 through $columnCount { 
    .col#{$i} { 
    width: $columnWidth * $i; 
    } 
} 

будет генерировать этот CSS:

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8 { 
    height: 10px; } 

.col1 { 
    width: 10em; } 

.col2 { 
    width: 20em; } 

.col3 { 
    width: 30em; } 

.col4 { 
    width: 40em; } 

.col5 { 
    width: 50em; } 

.col6 { 
    width: 60em; } 

.col7 { 
    width: 70em; } 

.col8 { 
    width: 80em; } 

Теперь, вы не можете установить height собственность, но вы Получите эту идею.