SCSS：如何使用變量來編寫樣式類？

Question

我想知道是否有某種方法可以使用影響SCSS樣式的變量。

我在尋找類似：

var x = 1 
.class1 { 
    if (x==1) { 
     background-color: red; 
    } else { 
     background-color: blue; 
    } 
} 
.class2 { 
    if (x==1) { 
     background-color: blue; 
    } else { 
     background-color: red; 
    } 
} 

Answer 1

您可以使用@if和@else

$x:1; 

.class1 { 
    @if $x == 1 { 
     background-color: red; 
    } @else { 
     background-color: blue; 
    } 
} 
.class2 { 
    @if $x == 1 { 
     background-color: blue; 
    } @else { 
     background-color: red; 
    } 
}