How to fake css variables in scss? - css

Question

I've tinkered around with css variables, finding an interesting application: You can define a --color variable, and use it as value for different attributes based on the class: A button could have its background filled with the --color, while a tab control could use a border-bottom with the --color to highlight the current tab as follows:
:root {
font: 14px sans-serif;
--red: #f44;
--blue: #78f;
--green: #3c1;
--color: var(--blue);
}
.blue {
--color: var(--blue);
}
.red {
--color: var(--red);
}
.green {
--color: var(--green);
}
.fillbutton {
background: var(--color);
color: #fff;
padding: 0.25em 1em;
}
.borderbutton {
background: #fff;
border: 1px solid var(--color);
color: var(--color);
padding: 0.25em 1em;
}
.tab {
border-bottom: 1px solid #ccc;
padding: 0 1em;
line-height: 150%;
}
.tab.current {
border-bottom: 2px solid var(--color);
color: var(--color);
font-weight: bold;
}
<p>
<span class="fillbutton">Default</span>
<span class="fillbutton green">Green</span>
<span class="fillbutton red">Red</span>
<span class="borderbutton">Default</span>
<span class="borderbutton green">Green</span>
<span class="borderbutton red">Red</span>
</p>
<p><span class="tab">Tab1</span><span class="tab current">Tab2</span><span class="tab">Tab3</span></p>
<p><span class="tab red">Tab1</span><span class="tab red current">Tab2</span><span class="tab red">Tab3</span></p>
By defining classes to alter the --color we can easily create different color schemes without having to be specific to the item we want to style: There is only one .red class needed, not separate .red.fillbutton/.red.borderbutton/.red.tab.current
Since css variables are not supported in some browsers I thought I would try to replicate this functionality using a proprocessor like scss, however scss variables seem to be global only and thus cannot mimic this use case. Is there a way that lets me achieve the above behaviour in a similar DRY fashion using scss?

Answer 1

Since generating CSS files via SCSS is easy, you can have separate colour variables SCSS files and master 'import' SCSS file (for all other SCSS files you might have). What you do then is you compile separate CSS files for each of the colour variables files (eg you could have 3 website colour themes, so 3 different colour variables SCSS files and then 3 different output files). When a user selects a different theme, you just remember which theme the user selected (cookie) and you load a proper CSS file via JS, instead of hardcoding which CSS file to use.
It's not completely DRY, as you do have to define "master" output SCSS files (these should include import of a proper colour variable SCSS file, which changes for each file, and an import of "master imports" SCSS file, which is always the same) separately for each colour variable (so if you have 3 colour themes, you would have to define 3 files) - although it can probably be done programatically as well. However, that way you can enable multiple colour themes of your website without worrying about current lack of cross browser support of plain CSS variables. As long as you have a predefined list of colour themes, that's probably the way to go.
If you do not have a predefined list of colour themes and want to enable the users to set up their own colour theme with a colour picker (and don't want them to first submit those values and then use those values, server-side, to generate a CSS file out of them and fetch that file to the user), you could make use of 'currentColor' CSS property. It is supported and can serve as a colour variable, although it's far more limiting in regards to capability than the new CSS variables. Basically, via the currentColor you accesses the colour property of parent element. So you could provide classes and styles for the parents (eg. .blue has a blue colour) and then style pretty much everything via currentColour. Then, when a user changes the colour blue to green via a colourpicker or something, you change the colour of .blue to the selected colour via JS. Obviously, you'd have to remember the user's selection and execute the JS function handling that on document ready. This workaround certainly has it's drawbacks (eg. defining colours via parents will mean lots of extra classes / parent elements that wouldn't otherwise be needed for styling), so it's not an exactly quick method either, but it doesn't rely on generating multiple CSS files.
In my opinion, it's best to use SCSS variables and generate multiple CSS files in case you have predefined colour themes. In case you allow the user to completely modify their colour theme, I'd go with submitting those values to server and generating a proper CSS file and then fetching that CSS file to the user. However, following this principle, the CSS file won't be updated as you make changes to your CSS and deploy those changes. So this method has its' drawbacks as well.
Until native CSS variables are properly supported in all relevant browsers, I fear there is no perfect solution.

Answer 2

After trying different strategies in scss i found the following solution using mixins. First, we must define all our colors, along with their desired class names, as a list variable:
// define all colors
$colors: (red, #f44),
(green, #3c1),
(blue, #78f);
// define default color to be blue
$color: nth(nth($colors, 3), 2);
Then we define a mixin colorize which first defines the given attributes with the default $color, then iterates the $colors list, doing the same thing for each color class, using the parent selector:
#mixin colorize($properties...) {
// for each property assign the default $color
#each $property in $properties {
#{$property}: $color;
}
// for each color class - assign the class color to each property
#each $cls, $col in $colors {
&.#{$cls} {
#each $property in $properties {
#{$property}: $col;
}
}
}
}
Now we can use the colorize-mixin to assign class-specific colors to one or more css properties:
.fillbutton {
#include colorize(background);
color: #fff;
padding: 0.25em 1em;
}
.borderbutton {
#include colorize(border-color, color);
background: #fff;
border: 1px solid;
padding: 0.25em 1em;
}
And finally, use it in our html like this:
<span class="fillbutton green">Green</span>
<span class="fillbutton blue">Blue</span>
<span class="borderbutton">Default</span>
<span class="borderbutton green">Green</span>