获取符号修改为继承父

我使用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

获取符号修改为继承父

回答

相关问题