Video Lesson:

Code Used in this lesson:

https://github.com/freemh/dont-repeat-your-css/tree/master/1-sass-fundamentals/3-css-variables

Introduction

Variables are used to store some specific values, and we can use them whenever you need them, CSS language has already the capability to use variables without the need of a preprocessor like Sass, and these CSS variables or they call them Custom Properties they have some features that Sass Variables doesn’t have, like access to the DOM, because they are considered a part of the DOM, we can even control them using JavaScript. Controlling CSS variables using javascript is not our subject today, we’ll use them from a simple main.css file.

How to create a CSS Variable?

To create a CSS variable is very simple, but first, we need to understand that we’ve two places where we store our variables, the first one is considered as global, and if we create a variable in the global scope or closure it will be accessible within the whole page.

Let’s create a variable danger-700 that will be accessible within the global scope by using the :root pseudo-class, then to create a variable we use these two dashes and the name of the variable --danger-700 in this case, then we set a value to it normally, like setting a value to a property, we go for a hex color #721c24, which it’s already here.

:root {
 --danger-700: #721c24;
}

This 700 here on the variable name means nothing, it’s just a convention that defines that this shade of the color is the darkest one.

Let’s replace this color #721c24 from this style sheet with the variable --danger-700, we’ve one here at .alert-danger, and to set the variable --danger-700 to the color property we need to use this function var(), then inside of the function we add the variable --danger-700, this is the only way on how to set a variable to a property within CSS.

.alert-danger {
 color: var(--danger-700);
}

Same goes for the .btn-danger selector

.btn-danger {
 background: var(--danger-700);
}

and the :hover pseudo-class of the .btn-danger, we replace this value #721c24 by var(--danger-700), COOL.

.btn-danger:hover {
 border: 1px solid #f5c6cb;
 background-color: #f8d7da;
 color: var(--danger-700);
}

We can do the same thing, for the other colors “#f5c6cb“#f8d7da, we create two other variables “danger-200and “danger-100.

 --danger-200: #f5c6cb;
 --danger-100: #f8d7da;

And we find these values, and replace them within the file, for both .alert-danger selectors

.alert-danger {
 border: 1px solid var(--danger-200);
 background-color: var(--danger-100);
}

And the .btn-danger:hover pseudo-class.

.btn-danger {
 background: var(--danger-700);
}
.btn-danger:hover {
 border: 1px solid var(--danger-200);
 background-color: var(--danger-100);
}

To understand what this :root it is exactly, so here on the index.html page we have nested tags, and the parent of all of them is the ‘’ tag, and this is what :root is about, when we create a variable within the :root, any nested element will be able to use this variable, it’ll be considered global.

Now if we’re in the opposite, and we want to create a variable that will be only accessible within a specific block or scope, Okay, we’ll go for this alert element, the goal is to create a variable that can be used only within this closure, not anywhere else.
To achieve that, we’ve to create the variable within the parent which it’s alert.
Okay, let’s move to our main.css file, and from .alert we’ll create a new variable --alert-link and we’ll get its value from the .alert-danger .alert-link.

.alert {
 --alert-link: #c73c49;
}

Then, we’ll replace the color value from .alert-danger .alert-link selector, with the variable --alert-link

.alert-danger .alert-link {
 color: var(--alert-link);
}

Now, if we copy this variable here var(--alert-link);, and we try to use it from the color property of the .btn selector.

.btn {
 color: var(--alert-link);
}

It’ll not work, why because the variable --alert-link can only be used within its scope, not anywhere else.
Let’s return the button color initial value.

.btn {
 color: #fff;
}

If we want to use the variable --alert-link within the .btn selector, we’ve two choices, whether create it on the :root which will be global or create another variable --alert-link within the .btn selector.

CSS Variables or Sass Variables

I’m sure that you’re asking yourself, so which one to use, the Sass variables, or CSS variables, the answer is depending on the use case, because CSS variables are not 100% supported by all the browsers, and a simple https://caniuse.com/css-variables will show some red colors, which means that it’s not fully supported, so you’ve to know them both, and the project of one of your client will have more power in this situation on which environment he or she wants the website to be used.

But stick to the Sass variables as the first choice, and if cross browsers validation it’s not something you’ve to deal with, in this case, you can use CSS variables.