使用僞選擇器嵌套Sass Ampersand

嘗試使用SASS＆符號獲取以下CSS輸出。當我們在內部的pesudo選擇器中使用＆符時它不起作用。使用僞選擇器嵌套Sass Ampersand

CSS

.test:first-child .test-image { display: block; }

SASS

.test { 
    &:first-child { 
     display: inline-block; 
     &-image { 
      display: block; 
     } 
    } 
}

上面的代碼基本上與級聯第一子 - 圖像。

來源

2016-11-22 Lokesh Yadav

這是因爲符號只是串聯與孩子家長。如果你想編譯CSS看起來像你的榜樣，你需要這樣做：

.test { 
    &:first-child &-image{ 
     display: block;  
    } 
}

來源

2016-11-22 06:44:07 davidatthepark

感謝大衛面前，它爲我工作。一個簡單的問題，如果第一個孩子在它裏面還沒有幾個css proerpties，那麼我是否需要爲第一個孩子編寫一個單獨的嵌套？ –

這是一個非常好的問題。我只是做了一些測試，它看起來像你可以這樣做： '''.test {：{0} {0}} {：1}：first-child {height：20px; ＆.test-image { height：30px; } } }''' 我學到了新東西！如果你能檢查我的答案是否正確，那也會很好〜 – davidatthepark

如果你正在努力實現

.test:first-child .test-image { display: block; }

與您的代碼是越來越編譯爲這個

.test:first-child-image { 
    display: block; 
}

相反，你可以簡單地把它寫成這樣。

.test:first-child { 
     .test-image { 
      display: block; 
     } 
}

希望它可以幫助

來源

2016-11-22 06:43:11 Geeky

你應該使用'：''第一child' – pwolaq

這聽起來像你有誤會的符號在薩斯是如何工作的。和號本質上是寫入每個外部選擇器，然後在選擇器之後添加選擇器到達結尾的簡寫。由於.test-image不同於.test，因此您應該如下指定它。

.test { 
    &:first-child { 
     .test-image { 
      display: block; 
     } 
    } 
}

編譯成

.test:first-child .test-image { 
    display: block; 
}

來源

2016-11-22 06:43:36 Gerrit0

使用僞選擇器嵌套Sass Ampersand

回答

相關問題