To work with styles is even more flexible and easier.

What's the idea

Every programming language has variables. Programs store intermediate data in them. But historically, there were no variables in CSS - it was just a document formatting language.

But over time, more and more complex things began to be done on CSS, and modern CSS already looks more and more like a full-fledged programming language. Now there are many sites where half of the interactivity is written in pure CSS and no external scripts. Finally, variables appeared in CSS.

Variables could be used in the past when programming CSS files, for example, using the SASS and LESS preprocessors. But then you still needed to compile the SASS or LESS file into pure CSS, and there were no variables there.

The advantage of native CSS variables is that they remain variables even on the finished page.

How to use

To declare a variable in CSS, you just need to come up with a name for it, put two hyphens in front of it, and after the name - a colon and the value of the variable:

body {
  --font-size: 21px;
}

Now this variable can be used instead of values in style properties. To do this, write var(), and in parentheses - the name of the variable. When the browser encounters such a construction, it will substitute the value of the variable instead.

body {
  --font-size: 21px;
  font-size: var(--font-size);
}

Default value

Sometimes the variable that we want to substitute in some place may not yet be defined (for example, the script has not yet run and has not assigned any value to it). In this case, use the second parameter to var():

var(variable, *default_value*)

You can use this construction like this:

var(--font-size, 36px)

When the browser encounters this snippet, it will try to find the --font-size variable and take its value. If there is no such variable, or it is empty, then the browser will use the value 14px instead.

Area of visibility

Variables are visible in the block in which they are declared.

Variables also act in all nested elements inside this block: if we declare a variable inside the body {} or html {} block, then it will be valid for all elements on the page because they are inside these blocks.

👉 If you need a global CSS variable that you want to work with from anywhere, you can declare it inside the pseudo-class: root {} declare them.

:root {
  --main-color: #e6b02e;
}

Variables also act inside child elements: if we declare a variable to describe the CSS property of a class, then, for example, paragraphs with this class will support this variable:

.navigation {
  --nav-color: #e6b02e;
}
.navigation a {
  color: var(--nav-color);
  border: 1px solid var(--nav-color);
}

Why do we need it?

Let's say we have a code snippet with a skin definition for two tags and one class:

p {
  font-size: 21px;
  color: #e6b02e;
}

a {
  font-size: 21px;
  color: #e6b02e;
}

.tags {
  font-style: italic;
  color: #e6b02e;
}

If we need to change the font size and active colour everywhere, we will have to manually go through all the styles and see if we have forgotten what to do. Instead, you can use variables - so we can change the value in one place, and it will be immediately used in all places:

:root{
  --font-size: 21px;
  --color-font: #e6b02e;
}

p {
  font-size: var(--font-size);
  color: var(--color-font);
}

a {
  font-size: var(--font-size);
  color: var(--color-font);
}

.tags {
  font-style: italic;
  color: var(--color-font);
}

Browser compatibility

CSS Variables are supported by all modern browsers except Internet Explorer (but not modern, Edge instead, which supports it), so this technique can be used in any new projects.

Why does CSS have variables?