覆蓋選擇器內部的SASS變量

Question

我試圖覆蓋變量的值，當正文上有一個特定的類。我希望能夠根據我添加到正文中的這個類來改變爲不同的「主題」。

我原色的默認變量

$primary: #6cc907; 

覆蓋的主要變量

.branded { 
    $primary: #e43e94; 
} 

Answer 1

考慮使用mixin，而不是爲這個應用程序的變量。在您的選擇器中，您可以包含mixin並將其傳遞給變量。您甚至可以爲mixin變量設置默認值，在這種情況下，您的基數爲background-color。通過傳遞mixin一個新值來覆蓋它。

薩斯

@mixin bg-color($primary: #6cc907) { 
    background-color: $primary; 
} 

div { 
    @include bg-color(); // Use default value 

    display: inline-block; 
    height: 300px; 
    width: 200px; 

    &.branded { 
    @include bg-color(#e43e94); // Override value 
    } 
} 

Codepen example

的