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