如何使默认变量不像sass的默认标记

Question

我有一个global.less文件，它调用variables.less文件，然后调用component.less文件。

我希望在组件文件中设置默认变量，并且能够在变量文件中覆盖它们。

但组件文件位于less文件之后，因此默认组件变量将覆盖variables.less文件中设置的变量。

Less中是否有任何选项可以像Sass的!default关键字一样使用？

Answer 1

@ seven-phases-max所述的解决方案是在我的组件文件之后移动variables.less文件。 e.g。

文件

• global.less - main less file
• variables.less - 包含所有变量
• component.less - 包含更少的代码和默认变量

在global.less文件中，按以下顺序调用这两个文件

@import "component.less";
@import "variables.less";

在component.less文件中，您可以拥有默认变量@color: red和以下css

body {
  background-color: @color
}

如果编译前面的代码，正文将具有红色的背景颜色 - 因为它使用了组件文件中的默认变量。

在variables.less文件中，您可以覆盖变量@color: blue

现在，当编译较少的文件时，body标签的背景颜色将为蓝色而不是红色 - 重新声明@color文件中的变量variables.less会覆盖默认的@color变量在components.less文件中