SCSS對於狀態的插值

Question

我希望能夠爲我的樣式表創建10個類，而不必創建每個類，以防我決定隨時間推移需要更多。我顯然沒有這個正確的，需要一些幫助我做錯了什麼。

@mixin ladders($num) { 
@for $num from 1 to 10 { 
    .ladder-#{$num} { 
    border: 1px solid #000; 
    } 
} 
} 

我已經瀏覽了參考資料，仍然很難理解把它放在一起的總體概念。

謝謝你的幫助。

Answer 1

首先，您的mixin總是會生成9個類，因爲您已經爲1 to 10（不包括10）硬編碼了for循環。你需要把它寫像這樣：

@mixin ladders($num) { 
    @for $i from 1 through $num { 
     .ladder-#{$i} { 
      border: 1px solid #000; 
     } 
    } 
} 

然後，你只需要在一些地方調用它，它並沒有成爲一個選擇的內部，如果你不希望它是。

@include ladders(5); 

輸出：

.ladder-1 { 
    border: 1px solid black; 
} 

.ladder-2 { 
    border: 1px solid black; 
} 

.ladder-3 { 
    border: 1px solid black; 
} 

.ladder-4 { 
    border: 1px solid black; 
} 

.ladder-5 { 
    border: 1px solid black; 
}