Question

我很难在我的Less代码中调试覆盖变量的情况。结构是这样的：

less
|- theme.less
|- theme-high-contrast.less
|- styles.less
|- variables.less
|- variables-high-contrast.less

theme.less：

@import('variables');
@import('styles');

variables.less：

@brand-blue: <blue>;
@brand-primary: @brand-blue;

主题高contrast.less

@import('variables-high-contrast');
@import('styles')

变量 - 高contrast.less

@import('variables');
@brand-blue: <some other blue>;

styles.less

.foo {
  color: @brand-primary;
}

两个theme个较少的文件会生成不同的css输出，这些输出会根据活动的主题进行换出。我得到的输出类似于：

theme.css和theme-high-contrast.css

.foo {
  color: <blue>
}

两个文件对于该变量具有相同的值，尽管它被明确覆盖，但我不能为我的生活找出原因。非常感谢任何帮助。

Answer 1

查看less文档中有关变量延迟评估的内容。看看这两个例子：

.lazy-eval {
    width: @var;
}

@var: @a;
@a: 9%;

还有一个：

.lazy-eval {
    width: @var;
    @a: 9%;
}

@var: @a;
@a: 100%;

两者都将编译为：

.lazy-eval {
    width: 9%;
}

当定义变量两次时，使用变量的最后一个定义，从当前范围向上搜索。这类似于css本身，其中定义中的最后一个属性用于确定值。

所以你在变量中有更少的文件：

@brand-blue: <blue>;
@brand-primary: @brand-blue;

稍后在主题较少的文件中：

@brand-blue: <some other blue>;

.foo {
    color: @brand-primary;
}

将编译为：

.foo {
    color: <blue>;
}

当包含文件时，变量的最后定义将获胜。因此，将使用@brand-primary的最后定义值（<blue>）。

要实现您要执行的操作，您必须更改主题@brand-primary文件中的less。其他方法不会在@brand-blue中定义variables.less，因此您可以稍后在主题文件中指定值。

您可以在其官方网站上read more减少变量。

希望它有所帮助。