更少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或范围问题相比，运行“何时”mixin似乎存在问题。我希望mixin可以运行并使用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。