在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 var保存为LESS var：

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

Answer 2

这是因为变量以这样的at符号开头：

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

所以只需将-更改为@，就可以了！

此外，您可能希望对项目中的样式使用一种文件扩展名。减少使用时，请确保所有文件都具有.less文件扩展名。