SCSS多个变量的值相同

Question

如果我有这个SCSS:

$a: #fff;
$b: #fff;
$c: #fff;
$d: #fff;

这有什么捷径吗？

Answer 1

如果由于某种原因需要它们保持相同的值但需要将它们作为单独的变量用于语义或可读性,或者为了实现简单的更改,您可以这样做:

$a: #fff;
$b: $a;
$c: $a;
$d: $a;

在处理可能在开发过程中发生变化的颜色时,我会不时地这样做.这是一个例子:

$background_color: white;
$text_color: #444;
$link_color: $text_color;
$overlay_color: rgba($background_color, 0.7);

这很有用,因为它允许我改变值$text_color并$link_color反映相同的变化,同时能够设置$link_color完全不同的东西.只使用一个变量$text_color和$link_color类似意味着我必须手动查看所有实例,以查看哪些与文本有关,哪些与链接有关.我认为一个好的做法是他们已经习惯什么,即命名你的变量$text_color和$link_color,而不是$blueish_color.