SASS包含父類風格

我想找到一種方法在嵌套風格中包含父類風格。在下面的代碼中，我想要在兩個嵌套樣式中包含在.random-div上設置的寬度和框尺寸，以便.random-div--large將具有width，box-sizing和padding全部設置。SASS包含父類風格

.random-div { 
    width: 100%; 
    box-sizing: border-box; 

    &--large { 
     padding: 65px 45px; 
    } 

    &--small { 
     padding: 25px 15px; 
    } 
}

我試過擴展嵌套的父類，但也包括所有其他嵌套樣式。有什麼方法可以包含父類型？

來源

2016-03-14 Sam Willis

您可以創建一個包含樣式的mixin，然後您可以在這兩個元素中包含樣式。我不確定是否有其他方法可以做到這一點。你也可以考慮將random-div和random-div-大類同時添加到同一個元素（這是我喜歡的，它可以讓你的CSS更清晰）。 – Leon

爲什麼有一個'less'標籤？ – Aziz

我不必告訴你，因爲你一直是SO的成員，知道這一點。但是，如果您正在尋找Sass的答案，請不要添加Less標籤（反之亦然），因爲這會導致用戶認爲在可能不適用的情況下會收到較少的答案。 – Harry

創建一個佔位符並使用它。

%random-div { 
    width: 100%; 
    box-sizing: border-box; 
} 

.random-div { 
    @extend %random-div; 
    &--large { 
    @extend %random-div; 
     padding: 65px 45px; 
    } 

    &--small { 
    @extend %random-div; 
     padding: 25px 15px; 
    } 
}

來源

2016-03-14 16:23:46 Aaron

與邊界元法的DIV應該有兩個標識和改性劑應該是這樣的

<div class="random-div random-div--large"></div>

所以它會得到所有三種風格。

來源

2016-03-14 16:23:20

我們試圖避免在html中添加所有的類，這樣'random-div-large'將包含'random-div'的所有樣式以及使其變大的額外樣式。 –

SASS包含父類風格

回答

相關問題