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.
source to share
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";
source to share