CSS Variables
When I last done any real development, I was starting to get into Sass (a little late to the party) having previously been a Less advocate. I even published a video course on ‘Learning LESS’.
Sass seemed to be developing faster and bringing more features to the table. Using tools such as CodeKit, Mixture (when that was still developed) and then using more command line based tools like Grunt & Gulp made processing Sass easier and it was a bit of a no-brainer.
There were of course, other pre-processors available but CSS Variables were also being talked about (but not implemented) at the time.
Variables within Sass & LESS made reusing code so much easier. You set the variable either at the top of the file or include a separate _vars.scss and then reference the variable name which would deliver that value: -
$brand-color: indianred;
h1 {color: $brand-color;}
This would set the h1 colour to indianred. Seems daft in this instance but when you’re setting a lot of elements to the same colour or delving deeper into @mixins, then it’s lovely!
So CSS Variables huh?
So that was nearly 5 years ago. I’ve seen many people using CSS variables as part of their toolkit. CanIUse reports 95%+ of users are using a browser capable of using CSS Variables so its clearly ready for use.
How do we get started though?
Let’s refer and compare the Sass variable example above and look at setting a CSS variable.
Sass: $brand-color: indianred;
CSS: --brand-color: indianred;
You’ll notice setting up a variable is similar, we substitute the $ dollar sign with two dashes --.
But things are a little different when calling a variable.
Sass: color: $brand-color;
CSS: color: var(--brand-color);
Here, we see that in order to use a variable, we wrap the variable name in var(…)
Scoped variables
One difference between previous pre-processors and CSS Variables is that when you set variables, or custom properties, they are written within a selector and that selector becomes the scope of the variable (follows the Cascade). In Sass, variables were written at the root of the Sass file, not within elements.
Take the following as an example
header {
--brand-color: indianred;
background-color: var(--brand-color);
box-shadow: 0rem 1rem 2rem var(--brand-color);
}
content {
color: var(--brand-color);
}
We’ve set our --brand-color variable within the header element which then becomes the scope. --brand-color will only be recognised within the header. We’ve tried calling it later as part of our content element but this won’t work because content is outside of the header scope.
So if we want to set a variable as a global variable which can be called in whatever element/scope we please, we need to set that variable within the :root pseudo element.
:root {
--brand-color: indianred;
}
content {
color: var(--brand-color);
}
This works because everything on a web page is part of the :root scope.
Scoping does give us better control and allows us to keep variables together based on their element if that variable is only being used as part of that element.
Fallbacks
We are able to define a fallback to our variables by utilising a second optional parameter as part of the var(…) function. Using the previous example, we would do this:-
content {
color: var(--brand-color, indianred);
}
This is helpful if the variable fails or is invalid, a typo for example.
Conclusion
I’ll be honest dear reader. When I jumped in head first to get this site back up & running, I didn’t want to get stuck in the mire of choosing what tools I’ll use or how I’ll write certain code etc etc. I wanted to get the site built and published. I hoped that the dopamine hit from completing the job would encourage me to continue.
So instead of getting bogged down in learning about CSS Variables, or finding a windows/mac app to process my Sass files, or setting up a Grunt task to do the hard work, or even figure out if Sass was the right tool for the job, I simply wrote the styles in what I knew would work. Good ol’ CSS.
The intention was always to learn new tricks and refine my code based on what I had learnt.
CSS Variables seemed like a great native replacement for Sass but now I’ve looked into it and understood how it works, I actually think Sass will be the better option.
I like the way Sass can not only provide variables, but also provide colour functions and mixins that can deliver so much more. Nesting, Extends & Partials are very enticing!
I’ll continue to explore CSS Variables, and coupled with Calc(), could create some awesome combos. But for the time being, I think I’m going to spend some time reacquainting myself with Sass.
Reading materials
Using CSS Custom Properties - MDN