更少的 CSS：使用 mixins 的条件 @imports - 变量范围

Question

我正在尝试通过设置检查特定变量将@import 特定文件放入我的Less 项目中。这是我目前所拥有的：

@import "shared/variables";
@import "shared/global";
@import "shared/hero";
@import "shared/listings";

//
// Color Variations
// Based on @bt-color-variation
// Decides when to load the light/dark theme
//
@bt-color-variation: dark; // Default color variation
.bt-color-variation(dark) {
    @import "color-variations/dark/global";

    @import "color-variations/dark/variables";
}

.bt-color-variation(dark) {
    @import "color-variations/light/global";
    @import "color-variations/light/buttons.less";

    @import "color-variations/light/variables";
}

.bt-color-variation(@bt-color-variation);

这实际上会根据该变量加载适当的颜色变化。问题是在该颜色变化的variable.less 文件中设置的任何变量都不会覆盖在shared/variables.less 文件中在它之外所做的事情。与常规的@imports 相比，运行“何时”混入似乎存在问题或范围问题。我希望 mixins 能够运行并使用 Less 的“last-win”变量案例。

任何关于我如何基于 Less 变量（而不是处理变量范围）有条件地加载文件的想法都会非常有帮助。一如既往的感谢。

Answer 1

mixin 中的变量不会覆盖调用者范围内的变量（请参阅Mixins as Functions）。

对于这个用例，我建议使用更简单的方法：

@bt-color-variation: dark;

@import "color-variations/@{bt-color-variation}/global";
@import "color-variations/@{bt-color-variation}/buttons";
@import "color-variations/@{bt-color-variation}/variables";

见Variabes > Import statements。