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

我使用darken来定义另一种颜色，但是如果基础颜色有重要标志，它将无法编译。这是我的scss

$baseColor: #FF6600 !important;

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

这就是错误所在 ... （#FF6600！重要）不是“变暗”的颜色

---

如果我将“重要”更改为“默认”，则一切正常。我需要一个重要的标志，因为这个变量在不同的地方被覆盖。我想知道我怎样才能解决这个问题？谢谢。

错误很清楚地告诉您出了什么问题。您试图将包含颜色（

#FF6600

）和字符串（

！important

）的列表传递给需要颜色的函数。

！默认

标志不是字符串，而是Sass语言构造

如果您需要使用

！重要信息

如果您每次使用此变量时都需要使用它，我强烈建议您重新评估代码。这被认为是一种代码气味

如果确实需要它，则必须使用

nth（）

函数提取列表的第一个元素

$baseColor: #FF6600 !important;

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

请注意，如果您的变量实际上不是一个列表（因为您试图选择一个不存在的元素），这将引发一个错误。如果您实际上不需要

！重要信息

在此处，无论是否有列表，都可以正常工作：

$baseColor: #FF6600 !important;

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

---

错误很清楚地告诉你出了什么问题。您试图将包含颜色（

#FF6600

）和字符串（

！important

）的列表传递给需要颜色的函数。

！默认

标志不是字符串，而是Sass语言构造

如果您需要使用

！重要信息

如果您每次使用此变量时都需要使用它，我强烈建议您重新评估代码。这被认为是一种代码气味

如果确实需要它，则必须使用

nth（）

函数提取列表的第一个元素

$baseColor: #FF6600 !important;

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

请注意，如果您的变量实际上不是一个列表（因为您试图选择一个不存在的元素），这将引发一个错误。如果您实际上不需要

！重要信息

在此处，无论是否有列表，都可以正常工作：

$baseColor: #FF6600 !important;

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