如何覆蓋SCSS for循環中的整數步驟（從*到*）

Question

有沒有辦法做到這一點？

SCSS：（須藤代碼）

@for $i from 0 through 10 (increment:0.5) { 
    .bottom-#{$i} { 
    bottom: 1em * $i; 
    } 
} 

CSS輸出：

.bottom-0 { 
    bottom: 0em; 
} 

.bottom-05 { 
    bottom: 0.5em; 
} 

.bottom-1 { 
    bottom: 1em; 
} 

.bottom-15 { 
    bottom: 1.5em; 
} 

.bottom-2 { 
    bottom: 2em; 
} 

我基本上是想for循環通過迭代到十增量爲0.5，就像在輸出的東西上面的css代碼塊，沒有包含在類名中的.5，因爲它將它視爲嵌套類。

Answer 1

完成它！哈克，但它的工作原理：

SCSS：

@for $i from 0 through 10 { // double 10 if you want to go to ten! 

    $iletter: $i*10/2; 
    @if $iletter < 10 { 
    $iletter: "0" + $iletter 
    } 

    $i: $i/2; 
    .bottom-#{$iletter} { 
    bottom: 1em * $i; 
    } 
} 

CSS輸出：

.bottom-00 { 
    bottom: 0em; 
} 

.bottom-05 { 
    bottom: 0.5em; 
} 

.bottom-10 { 
    bottom: 1em; 
} 

.bottom-15 { 
    bottom: 1.5em; 
} 

.bottom-20 { 
    bottom: 2em; 
} 

.bottom-25 { 
    bottom: 2.5em; 
} 

.bottom-30 { 
    bottom: 3em; 
} 

.bottom-35 { 
    bottom: 3.5em; 
} 

.bottom-40 { 
    bottom: 4em; 
} 

.bottom-45 { 
    bottom: 4.5em; 
} 

.bottom-50 { 
    bottom: 5em; 
}