具有十進制值的多個變量的每個循環的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%; 
}