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

将汇编本（不知道放在这里准确的顺序，没有萨斯可在瞬间）：

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