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

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%);
}