在n-child內使用SASS變量？

Question

我有一個網格設置縮略圖圖像，目前每行4個拇指。爲了確保他們排隊我有這樣的代碼片段：

li:nth-child(5) { margin-left: 0;} 

我試圖做的就是這一點，但我得到一個語法錯誤：

$galleryGrid: 5; 
    li:nth-child($galleryGrid) { margin-left: 0;} 

如果我想改變第n - 小孩使用另一個值，如10（所以我可以有8個拇指連續），我認爲這將工作。 這不可能，或者我只是做錯了嗎？！

在此先感謝您的幫助。

Answer 1

您需要使用變量插值來允許nth-child變量。

$galleryGrid: 5; 
li:nth-child(#{$galleryGrid}) { margin-left: 0;} 

生成

li:nth-child(5){margin-left:0} 

這個標記是好的，如果你有在圖像和佈局的絕對控制權，以確保您始終的元素以這樣的方式包裝，每一個5日開始新行。如果你不能做出這樣的保證，在父元素上設置負邊距是更好的方法。