SCSS для каждого цикла с несколькими переменными с десятичными значениями

Question

У меня возникают проблемы с циклом SASS @each с несколькими переменными с использованием десятичных знаков. Я могу заставить его работать на базовом уровне, но хочу добавить десятичные числа, что порождает ошибки.

Например ..

$columns: 100, 25, 33; 

@each $proportion in $columns { 
    .col_#{nth($proportion, 1)} { 
    width: percentage($proportion/100); 
    } 
} 

... успешно компилировать ...

.col_100 { 
    width: 100%; 
} 

.col_25 { 
    width: 25%; 
} 

.col_33 { 
    width: 33%; 
} 

Однако, пытаясь добавить десятичное в список переменных бросает мне ошибку. Например, как я могу получить эту работу ...

$columns: 100, 25, 33.333; 

Answer 1

Вы можете округлять значение для имени класса:

@each $proportion in $columns { 
    .col_#{floor(nth($proportion, 1))} { 
    width: percentage($proportion/100); 
    } 
} 

Выход:

.col_100 { 
    width: 100%; 
} 

.col_25 { 
    width: 25%; 
} 

.col_33 { 
    width: 33.333%; 
}