Less CSS : Conditional @imports using mixins - Variable scope

Question

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);

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.

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.

Answer 1

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

See Variabes > Import statements.