SASS 仅适用于一种样式 [英] SASS apply to only one style

问题描述

有没有办法拥有这样的东西:

Is there a way to have something like this:

.class1, .class2 {
    background: green;

    :not(.class1) {
        //Only apply to .class2
        background: red;
    }
}

编译为

.class1, .class2 { background: green; }
.class2 { background: red; }

我尽量不要让 .class2 在其他地方有自己单独的样式.

Im trying not to have .class2 have its own separate style somewhere else.

推荐答案

不，只有使用嵌套才能包含在 Sass 中，而不是排他性.你看过@extend 指令了吗?

No, it is only possible to be inclusive with Sass using nesting, not exclusive. Have you looked at the @extend directive?

%common-styles {
    border: 1px solid;
}

.class1 {
    @extend %common-styles;
    background: green;
}

.class2 {
    @extend %common-styles;
    background: red;
}

会编译成这个(不确定这里的确切顺序，目前没有可用的 Sass):

Would compile to this (not sure on exact order here, don't have Sass available at the moment):

.class1 { background: green }
.class2 { background: red }
.class1, .class2 { border: 1px solid }

显然不是您正在寻找的解决方案，但它是您通常使用 Sass 的方法.您是否有理由不能在其他样式中保留独特的 .class2 样式?

Obviously not the solution you are looking for, but it is the approach you would typically take with Sass. Is there a reason you can't keep the unique .class2 styling with the rest of the styles?

.class1, .class2 {
    background: green;
}

.class2 {
    background: red;
}

或者，您可以这样做:

.class2 {
    background: red !important;

    &, .class1 {
        background: green;
    }
}

这篇关于SASS 仅适用于一种样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！