sass - SASS 只适用于一种风格

Question

有没有办法有这样的东西：

.class1, .class2 {
    background: green;

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

编译为

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

我试图不让 .class2 在其他地方有自己独立的风格。

Answer 1

不，只有使用嵌套的 Sass 才能包含，而不是排他。你看过@extend 指令吗？

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

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

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

会编译成这个（不确定这里的确切顺序，目前没有可用的 Sass）：

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

显然不是您正在寻找的解决方案，但它是您通常在 Sass 中采用的方法。您是否有理由不能将独特的 .class2 样式与其他样式保持一致？

.class1, .class2 {
    background: green;
}

.class2 {
    background: red;
}

或者，您可以这样做：

.class2 {
    background: red !important;

    &, .class1 {
        background: green;
    }
}