Sass變量名稱相同但基於類的結果不同？

Question

我試圖把我的大腦包裹起來，我假設我需要一個if語句沿途的某處。

但我希望能夠做到這一點與sass。但是，這將只需要​​的顏色，並忽略默認的顏色，而不管類是什麼。

SASS

// Default Colours -------------------------------------------------------------- 
    $textColor: #FFF; 

.green { 
    // Base Colours -------------------------------------------------------------- 
    $textColor: green; 
} 

body { 
    text: $textColor 
} 

HTML

<p>jamie</P> //Output is #FFF 

<p class="green">jamie</P> //Output is green 

Answer 1

這裏是你可以使用一個小的mixin。

$base-color: green; 

@mixin change-var($var: $base_color, $selector: x, $property: color) { 

    @if $selector == x { 
     $var: blue; 
    } @else if $selector == y { 
     $var: green 
    } @else { 
     $var: $var; 
    } 

    #{$property}: $var; 
} 

用法：

.x { 
    @include change-var($base-color, x, color) 
} 
.y { 
    @include change-var($base-color, y, background-color) 
} 

輸出：

.x { 
    color: blue; 
} 

.y { 
    background-color: green; 
} 

Answer 2

試試這個

$textColor: #fff; 
body { 
    color: $textColor; 
} 
.green { 
    $textColor: green; 
    color: $textColor; 
}