獲取符號修改爲繼承父

我使用SASS的方便符號的符號來BEM式改性劑添加到我的班所有屬性：獲取符號修改爲繼承父

.box { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: magenta; 

    &--selected { 
     background: cyan; 
    } 
}

我探索的唯一具有申請單的可能性（例如：<div class="box--selected">...</div>，而不是<div class="box box--selected">...</div>）。我想避免使用@extend，它投射得太寬。目前我正在使用mixins，這很好，但對於每個具有修飾符的類都有一些細節。

我真正想要做的是讓&--selected繼承所有從父外殼從父外殼的特性，且僅 - 即忽略.box是粗心的開發者任何其它類的定義可能已插入。

來源

2016-11-29 Sandy Gifford

允許修飾符擴展所有屬性並不是個好主意。你的輸出css文件會變得越來越大，更多的修改你的。如果元素應該有幾個修飾符呢？ – 3rdthemagical

@ 3rdthemagical非常有意義。 BEM實際上建議你無論如何都使用基礎類和修飾語類 - 這更多的是思想實驗/特徵窘境。 –

我知道你已經表達了避免@extend的願望，但是這種方法可以讓你避免其他開發者的定義.box，同時仍然實現你的目標。

你可以使用佔位符來創建自己的父母外殼和延長佔位符（example of placeholder extension)只能從佔位符繼承作爲一個佔位符存在的與其他開發者階級衝突在.box沒有機會。

%box{ 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: magenta; 
 
} 
 
.box--selected{ 
 
    @extend %box; 
 
    background: cyan; 
 
}

相比混入此方法缺乏像從上述[1]提及本文以下例子中使用的參數：

@mixin padMasterJ ($param: 10px) { 
 
    padding: $param; 
 
}

另一件事值得注意的是，當被@extend上的父選擇使用的結果將包括所有嵌套選擇@extend不能用於直接擴展嵌套選擇器。

來源

2016-11-30 21:28:24 Bonk

有趣。這是否與製作混音有所不同？ –

好問題。我已經添加了一些關於'@ extend'與'@ mixin'在功能上有何不同的信息。希望這是有用的。 – Bonk

獲取符號修改爲繼承父

回答

相關問題