如何在Sass中嵌套課程？

-1

.light-hatching { 
    background-image: url('./assets/bg-button-default.png'); 
    background-repeat: repeat; 
    background-color: lighten(#f9f9f9, 2%); 
} 

.btn-default { 
    .light-hatching; 
}

注意btn-default被嵌套light-hatching。這在Sass中不起作用。 In the guide，他們說我可以做嵌套，就像它在LESS上工作一樣，但它確實有效。

如何在Sass中實現相同的LESS示例？

來源

2016-01-21 André Pena

你正在做的是*不*被稱爲「嵌套」。 – cimmanon

@cimmanon我不知道那個..我很快會接受的答案，我看到它被稱爲擴展 –

其實，你在做什麼叫mixins。在LESS中，每個選擇器實際上都是一個沒有參數的混音器。 [擴展]（http://lesscss.org/features/#extend-feature）在大多數情況下可能具有相似的效果，但不會產生與LESS代碼相同的結果。甚至可能讓你遇到媒體查詢的麻煩。 Sass不支持您用LESS代碼演示的功能。 – gligoran

我想你要找的是@extend，它從另一個選擇器（或佔位符）中導入樣式。

.btn-default { 
    @extend .light-hatching; 
}

來源

2016-01-21 23:15:55 probablyup

這個答案是誤導性的，因爲使用'@ extend'擴展不會給你同樣的結果，因爲OP的例子會給你提供LESS。在LESS中，樣式將被複制到'.btn-default'選擇器，而在SCSS中，'.btn-default'選擇器將被添加到'.light-hatching'。當您想要「擴展」多個選擇器時，這變得更加明顯。 – gligoran

不，它不。看看這個SassMeister的要點：http://www.sassmeister.com/gist/816aa35741b276d7670bdbfd3e6a7036。它只是將'.btn-default'附加到其他兩個類中，而不是像LESS那樣將它們的規則集複製到'.btn-default'中。 – gligoran

如何在Sass中嵌套課程？

回答

相關問題