这可能看起来很基本,但我不知道如何在 LESS 中使用 CSS 变量?
变量.css:
.root {
--header-color: white;
--content-color: yellow;
}
styles.less:
@import "../variables.css";
.header {
color: @header-color;
}
我收到错误“@header-color 未定义”。
LESS 允许您使用普通的 CSS 代码,因此使用一个选项可以只使用变量作为 CSS:
@import "../variables.css";
.header {
color: var(--header-color);
}
此外,您可以将 css var 保存到 LESS var:
@import "../variables.css";
@header-color: var(--header-color);
.header {
color: @header-color;
}
color: darken(var(--header-color), 50%)
等 less 函数的参数。即使您之前保存在 less 变量中 color: darken(@header-color, 50%)