zan0

Appearance

CSS variables and their scopes ​

2019.04.13#lessons

CSS variables have widespread browser support these days and need occasional reminders to developers about how they work 😉. First, they can look like this...

css
:root {
  --button-width: 100px;
}

:root is a pseudo element representing the root element of your document (in this case <html>). By declaring variables here you are essentially placing them in the global scope available to any CSS. In this case the variable --button-width is declared with a value of 100px. You can declare as many variables as you like and they can contain values that are numeric , percentages, string, colors and more. Your first thought in looking at this might be , two starting dashes ? Yuck 🤢. The internet has pointed this out but don't expect any changes.

So how do you use it? ​

Like this:

css
#my-button {
  border: 1px solid black;
  background-color: orange;
  text-align: center;
  width: var(--button-width);
}

We 'call' a variable with the var() function and pass in the variable we want to use. And if we had this html...

html
<button id="my-button">CSS Variables!</button>

You'd get this...

Scope declaration ​

What if another declaration of the --button-width variable happened inside #my-button style declaration ?

css
#my-button {
  --button-width: 200px;
  border: 1px solid black;
  background-color: orange;
  text-align: center;
  width: var(--button-width);
}

Would this result in a button of 200px width as defined in this scope or 100px width as defined in the :root ? Answer: 200px. Locally scoped variables have precedent 😃

CSS Variables!

Why use variables in my CSS ? ​

For the same reason you would in any other programming language: reduce repetition, modularize styling, make things neat for the next developer. For example, how many times have you re-declared that same blue color for your buttons all over your html/css (maybe even inline-ing) and decided you wanted to change it, but dreaded all the places you would have to update it? Variables would help you out there 😉

~ zan0