less - 如何在 less like sass 的 !default 标签中创建默认变量

Question

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

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

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

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

Answer 1

@seven-phases-max 所述的解决方案是将 variables.less 文件移到我的组件文件之后。例如

文件

• global.less - 主要 less 文件
• 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

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