在LESS中使用CSS变量

Question

这似乎是基础问题，但我不知道如何在LESS中使用CSS变量？

variables.css：

.root {
    --header-color: white;
    --content-color: yellow;
}

styles.less:

@import "../variables.css";
.header {
   color: @header-color;
}

我遇到了错误，提示“@header-color未定义”。

- darKnight

Answer 1

LESS允许您使用普通的CSS代码，因此一种选项是只需将变量用作CSS：

@import "../variables.css";
.header {
   color: var(--header-color);
}

此外，您可以将css变量保存到LESS变量中：

@import "../variables.css";
@header-color: var(--header-color);

.header {
   color: @header-color;
}

- The.Bear

---

当我们使用它时，fade返回：在less的darken函数中，a.toHSL不是一个函数。 - Pradeepa

@Pradeepa，我稍后会在我的回答中添加详细的警告，主要是为了避免混淆，但是简短回答一下：无法将CSS变量用作Less函数的参数，例如color: darken(var(--header-color), 50%)。 - The.Bear