使用较少的CSS变量

less允许您使用普通的css代码,因此使用一个选项可以将变量用作css:

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

显然,可以将css var保存为较小的var:

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

这是因为变量以at符号开头,如下所示:

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

所以,只要把-改为@就行了!

此外,您可能希望项目中的样式具有单一类型的文件扩展名。使用较少时,请确保所有文件的扩展名都为.less。