较少的CSS:使用mixins的条件@imports-可变范围 [英] Less CSS : Conditional @imports using mixins - Variable scope

问题描述

我要通过设置检查特定变量来将@import特定文件放入我的Less项目中.这是我到目前为止的内容:

What I'm attempting to do is @import specific files into my Less project by setting checking for specific variables. This is what I have so far:

@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时存在问题，或者是范围问题.我希望mixins可以运行，并使用Less的"last-win"案例作为变量.

This does in-fact load the appropriate color variations based on that variable. The issue is that any variables set within that color variation's variable.less file are not overriding what is done outside of it in the shared/variables.less file. It seems like there's an issue with either "when" mixins are run compared to the regular @imports or a scope issue. I was hoping the mixins would run after and use Less's "last-win" case for variables.

任何有关如何基于Less变量(不处理变量范围)有条件地加载文件的想法都将非常有用.一如既往的感谢.

Any ideas with how I'd conditionally load files based on a Less variable (and not deal with variable scope) would be EXTREMELY helpful. Thanks as always.

推荐答案

mixin中的变量不会覆盖调用方范围内的变量(请参见

Variables from within mixins do not override those in the caller scope (see Mixins as Functions).

对于这个用例，我建议一些更简单的方法:

For this use-case I'd suggest something more simple:

@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";

请参见变量>导入语句.

这篇关于较少的CSS:使用mixins的条件@imports-可变范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！