SCSS根據父類更改變量？

Question

我有這個問題，在我的工作中，我們有一個包含數千行scss代碼和幾個變量的基礎項目。當這個基地只需要一個網站就可以，開發進展很快。我可以更改$generalColor變量並應用正確的顏色。

問題出現在某個地方，在同一個項目中，需要一組新的顏色（變量）（微型網站）。然後通常是一個需要搜索每一個地方使用$generalColor地方，並添加類似：

$generalColor_SOMETHING: #453543; 
.newExtraSetOfColor & { 
    background: $generalColor_SOMETHING; 
} 

和各個變量*每組新的色彩。如果有很多微型站點/顏色集合，這是一場噩夢。

有沒有更好的方法呢？ （JavaScript的喜歡？）

Answer 1

你可以做這樣的事情有一個mixin：

$colors: (
    // Default color set 
    default: (
    red: #ff0000, 
    green: #ff0000, 
    blue: #ff0000 
), 
    // Pastel color set 
    pastel: (
    red: #ff6961, 
    green: #77dd77, 
    blue: #aec6cf 
) 
); 

@mixin color($color) { 
    color: map-get(map-get($colors, default), $color); 

    .colors--pastel & { 
    color: map-get(map-get($colors, pastel), $color); 
    } 
} 

h1 { 
    @include color(red); 
} 

輸出：

h1 { 
    color: #ff0000; 
} 
.colors--pastel h1 { 
    color: #ff0000; 
}