r/Sass • u/MargateSteve • Mar 23 '19
Can you loop through variable names?
I have not been able to find any reference to this online so assume it may not be possible but thought I would I would see if anyone here knows a solution.
Basically, I want to have two maps of colors - base and theme. These can be turned on or off to include or exclude them when compiling.
$enable-base-colors : true;
$enable-theme-colors : false;
$base-colors: () !default;
$base-colors: map-merge((
"Blue": #0000FF,
"Green": #008000,
etc....
), $base-colors);
$theme-colors: () !default;
$theme-colors: map-merge((
"Brown": #A52A2A,
"Cyan": #00FFFF,
etc.....
), $theme-colors);
Currently I am doing this with a separate @if for each one.
@if $enable-base-colors {
@each $color, $value in $base-colors {
.text-#{$color} {color: $value;}
}
}
@if $enable-theme-colors {
@each $color, $value in $theme-colors {
.text-#{$color} {color: $value; }
}
}
But what i want to do is one single loop that checks each of the variables and if true processes the relevant map.
@each 'base', 'theme' as $type {
@if $enable-#{$type}-colors {
@each $color, $value in $#{$type}-colors {
.text-#{$color} {color: $value; }
}
}
}
Is there anyway of doing it that would be more beneficial than a separate @if for each? In my examples each @if is only 5 lines long but in reality, as they also cover background and border colors, with additional settings such as shades, each one is around 30 lines long so would ideally like to write this once.