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

Answer 2

不要使用 4 个变量，只有当它们具有相同的值时才使用 1

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