如您所见，我有一个 .mainContainer 的变体，形式为 &--alt.但是，我需要在 &--alt 类中重复 .mainContainer__content 来说明如果在父容器，则 .mainContainer__content 将具有不同的样式.
有没有更好的方法来写这个，因为如果我要在这个特定的例子中写出完整的类名，它似乎违背了使用速记版本的目的.
CSS:
.mainContainer {//一些 CSS 属性&--alt {.mainContainer__content {//一些 CSS 属性}}&__内容{//一些 CSS 属性}}HTML:
<div class="mainContainer__content">//一些风格HTML(带 alt):
<div class="mainContainer__content">//其他风格你可以像这样将主类保存在一个变量中
.mainContainer {$self: &;//一些 CSS 属性&--alt {#{$self}__content {//一些 CSS 属性}}&__内容{//一些 CSS 属性}}另一种选择是将修饰符放在.mainContainer__content 例如.mainContainer__content--alt
As you can see, I have a variation for .mainContainer in the form of &--alt. However, I need to repeat .mainContainer__content inside the &--alt class to say that if there's a .mainContainer--alt in the parent container, then .mainContainer__content will have a different styling.
Is there a better way to write this as it seems to defeat the purpose of using the shorthand version if I am going to write out the complete class name in this particular example.
CSS:
.mainContainer {
// SOME CSS properties
&--alt {
.mainContainer__content {
// SOME CSS properties
}
}
&__content {
// SOME CSS properties
}
}
HTML:
<div class="mainContainer">
<div class="mainContainer__content">
// some style
</div>
</div>
HTML (with alt):
<div class="mainContainer mainContainer--alt">
<div class="mainContainer__content">
// some other style
</div>
</div>
You can save the main class in a variable like this
.mainContainer {
$self: &;
// SOME CSS properties
&--alt {
#{$self}__content {
// SOME CSS properties
}
}
&__content {
// SOME CSS properties
}
}
Another option is to put the modifier on the.mainContainer__content e.g. .mainContainer__content--alt
这篇关于你如何为已经在 SASS/SCSS 中声明的嵌套类编写简写?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！