减少 CSS : Conditional @imports using mixins - Variable scope

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 的“最后赢”案例作为变量。

关于我如何基于 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 .