Using CSS Custom properties (variables)
Tags: css, cssvariables, customproperties
Published: 2019-10-04 08:28:20

---
title: Using CSS Custom properties (variables)
published: true
description:
tags: #css #cssvariables #customproperties
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dwwrai3li19fhjbiqrjb.png
---

# Video Lesson:

{% vimeo 364245302 %}

## 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.

```css
: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.

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

Same goes for the `.btn-danger` selector

```css
.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.

```css
.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-200` and “danger-100`.

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

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

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

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

```css
.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 ‘<html>’ 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`.

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

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

```css
.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.

```css
.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.

```css
.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.