重構SCSS與降壓

比方說，我要做到這一點：重構SCSS與降壓

#page { 
    p { 
    margin: 10px 20px; 
    color: white; 
    padding: 10px; 
    } 
    #form { 
    p { 
    color: gray; 
    } 
    } 
}

你會發現，在所有的#page是p應該有大將風範。但#page #form應繼承除color以外的一般p。

有沒有更好的方法來寫這個？

謝謝。

來源

2012-09-28 Victor

不，there is no way to restore the "default" value爲樣式屬性。

您可以限制#page p款式只有那些是#page與#page > p直接後裔段落，否則#page p必然符合所有這些#page #form p匹配的段落。將#page p款式將應用於這些元素，並且如果要使用#page #form p撤消這些元素，則必須按照您希望顯示的樣式明確指定樣式。

來源

2012-09-28 03:56:49 meagar

您可以使用@extend，但不能使用繼承的選擇器。

你可以使用一個@擴展，只有選擇像這樣：

#page { 
    %common_p { 
     margin: 10px 20px; 
     color: white; 
     padding: 10px; 
    } 

    p { 
     @extend %common_p; 
    } 

    #form { 
     p { 
      @extend %common_p; 
      color: gray; 
     } 
    } 
}

其輸出作爲

#page p, #page #form p { 
    margin: 10px 20px; 
    color: white; 
    padding: 10px; } 
#page #form p { 
    color: gray; }

我希望這實現你渴望什麼！

我不確定這是否更好，但由於級聯的原因，#form中的任何p標籤也已經獲得＃頁面的p標籤。例如。他們會得到邊緣和填充和顏色，但顏色會被覆蓋。

即使沒有發生級聯（例如，如果＃form存在於#page之外），這也會迫使其發生。如果是這樣的話，那麼這種技術會更好，因爲SASS會將風格結合起來使輸出更少重複。

您可以在http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders

中瞭解@extend在做什麼

來源

2013-02-05 00:27:32

重構SCSS與降壓

回答

相關問題