在 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 未定义”。

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

Using CSS variables in LESS