我如何才能推翻SCSS中的@extend指令呢？
我在按钮组里有按钮。按钮组有不同的大小，例如button-group-large。我的目标是避免在按钮组中显式地设置每个按钮的大小，让它从按钮组中推断出大小。那就是，而不是
<div class="button-group-large">
<button class="button-large">Foo</button>
<button class="button-large">Bar</button>
</div>我宁愿这样写：
<div class="button-group-large">
<button>Foo</button>
<button>Bar</button>
</div>我可以这样做(在SASS中)：
.button-group-large {
button { @extend .button-large; }
}这是可行的，但会产生以下问题。如果我的一个按钮有一个特殊的类，.button-large类将优先。也就是说，如果我做了
<div class="button-group-large">
<button class="special">Foo</button>
<button>Bar</button>
</div>然后，.special和.button-large之间任何不同的属性都将得到.button-large值，而不是.special值。我希望这是相反的；.special应该在这里获胜。(作为一个真实的例子，.special可能设置一个“主”按钮颜色)。
下面是一个演示这个问题的小摆设：https://jsfiddle.net/wwr63qmv/3/
作为参考点，引导按钮组通过要求在每个按钮上而不是在按钮组上单独设置类来避免这个问题。这可能是唯一的答案。还有其他方法可以让.special类在这里获胜吗？
回答 1
Stack Overflow用户
发布于 2016-06-18 05:23:03
您所面临的问题不是由Sass或@extend指令造成的。这就是CSS的工作方式。如果多个选择器指向同一元素，则最特定的选择器将获胜(或)，如果特异性相同，则文件中定义的最新选择器将获胜。
当编译时，小提琴中的SCSS代码将产生以下输出：
.button, ul.button-group li button { /* check this selector */
border: 1px solid black;
color: black;
border-radius: 2px;
}
.special-button { /* and this */
border: 1px solid green;
color: green;
}
ul.button-group {
margin: 10px;
}
ul.button-group li {
list-style-type: none;
display: inline-block;
padding: 5px;
}
p {
font-family: monospace;
}这两个选择器- ul.button-group li button和.special-button都将针对具有类为.special-button的按钮。第一个选择器的特异性是013 (因为它有一个类和三个类型选择器作为完整复杂选择器的一部分)，而对于第二个选择器的特异性是010 (因为它只有一个类选择器)。因此，从本质上说，第一个选择器获胜，并且只有在它下面指定的属性才适用于元素。
为了使.special-button风格得到应用，应该增加选择器的特异性。这可以简单地通过将选择器更改为ul.button-group li button.special-button来完成，但这意味着选择器现在只针对button和class='special-button'，后者位于li的ul父程序有class='button-group'的li中。这使得它非常具体，并意味着如果button.special-button在ul.button-group li之外，则属性将不适用。
另一种选择是将.special-button也扩展到li中，如下所示：
ul.button-group {
margin: 10px;
li {
list-style-type: none;
display: inline-block;
padding: 5px;
button {
@extend .button;
&.special-button { /* note this */
@extend .special-button;
}
}
}
}https://stackoverflow.com/questions/37888874
复制相似问题
腾讯云开发者
