Less CSS: @imports conditional using mixins - variable scope

What I am trying to do is @import

specific files in my Less project by setting certain variables to check. 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);

      

This actually loads the appropriate color variations based on this variable. The problem is that any variables set in this color change option variable.less

do not override anything outside of it in the file shared/variables.less

. There seems to be a problem with "when" the mixins run versus normal @imports

or scoped problem. I was hoping the mixins would work after and use less "last wins" for variables.

Any ideas on how I conditionally load files based on the Less variable (and not dealing with variable scoping) would be extremely helpful. Thanks as always.

+3


source to share


1 answer


Variables from within mixins do not override values ​​in the call scope (see Mixins as Functions ).

In this case, I suggest something simpler:



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

      

See Variabes> Importing Instructions .

+5


source







All Articles