SCSS根据父类更改变量？

我有这个问题，在我的工作中，我们有一个包含数千行scss代码和几个变量的基础项目。当这个基地只需要一个网站就可以，开发进展很快。我可以更改$generalColor变量并应用正确的颜色。SCSS根据父类更改变量？

问题出现在某个地方，在同一个项目中，需要一组新的颜色（变量）（微型网站）。然后通常是一个需要搜索每一个地方使用$generalColor地方，并添加类似：

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

和各个变量*每组新的色彩。如果有很多微型站点/颜色集合，这是一场噩梦。

有没有更好的方法呢？（JavaScript的喜欢？）

来源

2017-07-07 distante

你可以做这样的事情有一个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; 
}

来源

2017-07-07 14:14:55 zessx

所以我应该为使用该颜色的每个属性做一个mixin。 'color'，'background'，'border'等等。 – distante

@ distante恐怕是这样。 Sass中没有动态变量。 – zessx

SCSS根据父类更改变量？

回答

相关问题