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;
    }
}

SASS仅适用于一种风格

1 个答案: