CSS Variables Overview

[00:00:00]
>> When I started discussing the scores, many people were surprised. How could you possibly spend a whole day discussing CSS variables? Like really, a whole day? How much is there to CSS variables? So this actually stems from a misconception about what CSS variables really are. A lot of people are used to something like this in Sass, they define like their global variables, and then they use them.

[00:00:29]
And it's pretty processed and CSS is spat out less looks kind of similar, just slightly different syntax. So then they refactor their CSS to look like this. And they're like, okay, I don't understand what all the fuss is about, this just does the same things with weirder, lengthier syntax.

[00:00:51]
But that buries the lead because CSS variables can do so much more. So let's look at an example here and this is the first slide that has live coding areas. So I'm gonna walk you around a little bit because you're gonna be doing exercises on these as well.

[00:01:09]
You can edit the code areas by typing here, you can press the up and down auto keys to increment and decrement things. And it works just like dev tools so shift and alt and control work as well. Every slide has notes on the top right corner. Unless I tell you to open these notes, you probably won't need them during the workshop, but they often have supplemental resources that you could look at by yourself after the workshop, or if you're watching this at home.

[00:01:43]
You can press the Next button to go to the next slide because sometimes the arrow key won't work. And those slides if you focus on the iframe here, and if you're more comfortable editing code in code pen you can press the code pen button and it opens the current state of your code in code pen.

[00:02:00]
So you could even start writing code in the code area here and finish in code pen if you feel that you'd be more comfortable doing that. And you can click on the HTML panel to pop up the HTML or the CSS panel to pop up the CSS. One thing to note, is that on these slides it doesn't include the entire, CSS code but only what's relevant to this particular example.

[00:02:26]
Whereas if you open on code pen obviously will need to have the entire CSS code otherwise it wouldn't work. So that is part of the reason why I prefer these because I can show you only what's relevant and not the entire like background setting code and like padding and margins and all of those that are not actually relevant, So back to the point I wanted to make here, so take a look at this code I'm setting the corner size custom property on these two rules and I'm actually using it on on a separate rule.

[00:03:00]
This is something that you already cannot do in Sass. In fact, in the notes I have a link to a code pen, that we could look at, that shows you what kind of syntax error happens if you try to do something like this in Sass. So I've actually re-factor this example to use exactly the same code but with Sass variables and if I try to edit here you'll see that code pen complains that there's an error.

[00:03:23]
What is the error undefined variable because in Sass every variable needs to be used within the same curly brackets that it's defined or nested curly brackets inside them. It has what we call in programming languages lexical scope it's the same thing that that JavaScript has it's the same way that JavaScript scopes variables.

[00:03:43]
In CSS we have dynamic scope variables are defined on elements and they're scoped to the element and we can define them anywhere. So notice here we can use whatever kind of measurement we want first off and we could even set this property on an inline style and it would work just fine.

[00:04:11]
Take a look at that, that is something you can't do with Sass. And as we'll see in the end of the workshop, we can even use JavaScript to set these variables and that opens up so many possibilities. So the first takeaway is that Sass variables are scoped on curly bracket blocks where a CSS variables are scoped on actual elements.

[00:04:32]
So before I move on, let's get something out of the way. I know that some of you are thinking wait a second. I thought we weren't supposed to call these CSS variables, there are custom properties, right? The short answer is it doesn't matter use whatever term you want in fact the actual specification you can find the link to that in the notes uses both and here's their custom properties but they can also be used as reactive variables as well.

[00:04:59]
Certain use cases naturally make more sense with one or the other term, others work with both. I'll be using both terms today throughout the workshop and some people have suggested using the term custom property when setting them and CSS variable when getting them, feel free to adopt that if it resonates with you, or don't, it doesn't actually matter.

[00:05:22]
And another thing to get out of the way, because I get this question a lot, what's up with root? Why do people keep defining variables in root. So this is just a convention. Root is a pseudo class that resolves to the root element, which is the HTML element in HTML, the SVG element in SVG, and so on because, yes, custom properties work in SVG as well.

[00:05:46]
Any markup language on the web, custom properties work there too, anything that accepts CSS really. But in HTML, it's just equivalent to the HTML selector. It just has higher specificity, it has the specificity of a class, instead of the specificity of an element. But it's just a convention nothing changes if you don't follow it so you could follow it or not.

[00:06:11]
Some people like to do this, they like to separate their global variables into a root selector just to signify to other developers that hey these are my global variables. And then they use the actual HTML selector for any actual styles but you could also just use the HTML selector you could just use the route selector for both.

[00:06:32]
In the past, there was an actual practical reason to use route there were some preprocessor plugins some posts CSS plugins that pre processed custom properties to rewrite them to actual CSS for browsers that don't support custom properties. These days this is not really relevant first of every browser supports custom properties today.

[00:06:55]
And also there are better pre processors today. So even if you do need to rewrite them, there are smarter pre processors that take all rules into account and not just route. And another thing to get out of the way is what CSS variables can't do because the rest of the workshop focuses on what they can do so I feel it's only fair to tell you what they can't do straight up, so you don't struggle trying to get them to do things that they weren't designed for.

[00:07:25]
So one thing that Sass can do that CSS variables cant, is using variables in property names. CSS variables can only be used in property values or descriptor values, in some cases not property names. They can also not be used in selectors and they cannot be used in not rules.

[00:07:50]
Basically, this entire table is telling you one thing. CSS variables can only be referenced in property values and nothing else. But nothing prevents you from using SASS variables for those cases, as we'll see in some parts of the workshop you can actually mix and match. You can use CSS variables together with Sass variables to get the most of both worlds.