css - SCSS 多变量同值

Question

如果我有这个 SCSS/SASS:

$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 反射(reflect)相同的更改，同时能够设置$link_color 到完全不同的东西。仅对 $text_color 和 $link_color 使用一个变量意味着我必须手动查看所有实例以查看哪些与文本相关，哪些与链接相关。我认为一个好的做法是根据变量的用途来命名变量，即 $text_color 和 $link_color 而不是 $blueish_color。