如果颜色变量具有重要标志，则无法使用变暗

Question

我使用 darken 来定义另一种颜色，但是如果基色有重要标志，则编译失败。这是我的scss

$baseColor: #FF6600 !important;

.my-link:active {
    color: darken($baseColor, 20%);
}

这是错误 ... (#FF6600 !important) 不是“变暗”的颜色

如果我将重要更改为默认值，一切正常。我确实需要重要的标志，因为这个变量在不同的地方被覆盖。我想知道如何解决这个问题？谢谢。

Answer 1

错误非常清楚地告诉您出了什么问题。您正在尝试将包含颜色 (#FF6600) 和字符串 (!important) 的列表传递给需要颜色的函数。 !default 标志不是字符串，它是 Sass 语言结构。

如果您需要经常使用!important 以至于每次使用此变量时都需要使用它，我强烈建议您重新评估您的代码。这被认为是代码异味。

如果你真的真的需要它，你必须使用nth() 函数来提取列表的第一个元素。

$baseColor: #FF6600 !important;

.my-link:active {
    color: darken(nth($baseColor, 1), 20%) nth($baseColor, 2);
}

请注意，如果您的变量实际上不是一个列表，这将引发错误（因为您正在尝试选择一个不存在的元素）。如果您在这里实际上不需要!important，那么无论有没有列表都可以正常工作：

$baseColor: #FF6600 !important;

.my-link:active {
    color: darken(nth($baseColor, 1), 20%);
}