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。

Answer 2

不要使用4个变量，如果它们具有相同的值，则仅使用1

$a: #fff;
$a: #fff;
$a: #fff;
$a: #fff;