Native variables in CSS. It is time…

Hello everyone, the topic of variables in CSS has been around the Internet for a long time, but not everyone knows what it is, and the technology itself has recently been released. And although it is a bit early to use it, it is time to understand what it is and how to use it. Let's try to deal with technology together. Please note that this article is for those who do not know about CSS variables (custom properties) or have only heard about them. If you are familiar and know how to work with this feature, then you will not be interested in this article.

So, the theme with variables in styles has already been erased to the holes, because they exist long ago in preprocessors. This is convenient, I already have a bad idea of ​​writing styles without the ability to save somewhere a specific value (color, size, font name, type of marker in the list, everything that might come to mind ...). However, preprocessors cannot give us the flexibility that native variables in CSS give us, and soon you will understand why.

First you need to understand how to declare and use variables. Variables are declared in selectors:

:root { --body-background: #ccc; } body { background-color: var(--body-background); } 

As you can see from the listing above, the variables are declared with two hyphens in front of the name:
--variable-name
')
To use a variable, you must use the var function. It has 2 parameters. This is, of course, the name of the variable, and the second optional parameter is the value of the property, which must be used in the absence of a variable.

With this, the set of new features does not end with the arrival of variables. Having variables in the CSS arsenal gives us more flexibility in writing styles. For example, now to create a media query for screens <320px wide, you do not need to override the entire property. It is enough to change the value of the variable. Those.

 .title { --wrapper-width: 50%; width: var(--wrapper-width); } @media (max-width: 320px) { --wrapper-width: 100%; } 

Everything! This is enough for the width property to change its value!

If CSS is able to track changes in its variables, this means that you can interact with it in various ways.

What about javascript?

By controlling the style attribute, you can change the style by resorting to minimal effort. Let me give you a rough example on React.

 .title { --background: blue; background-color: var(--background); } 

 changeColor() { this.setState({ style: {'--background': 'green'} }); } <div className="title" style={this.state.style} onClick={this.changeColor.bind(this)}>Title</div> 

Now, by clicking on the element with the title class, the background color of the element will change. Cool? Still would! You do not need to add a new class, redefine a property, or take other actions to change the background color of an element.


Using variables, changing css from the outside has become easier, using methods can come up with mass, and we will go further.

Scopes

I need to say a few words about the scope of CSS variables, everything is simple. The declared variable is available to all selectors of the child elements of this selector. Those. in the listing below, using the variable - b in the html tag will be impossible. But the variable --a in the body and all the child elements will work without problems (unless of course it is redefined somewhere below).

 html { --a: #ccc; } body { --b: #a3a3a3; } 

(I know that the colors in the examples are boring, but I don’t remember the colors by the hex code :))

Variables and calc

Like any numerical value of a property, you can use a variable in the calc function.

 .title { --title-width: 300px; width: calc(var(--title-width) + 150px); } 

Cool! Especially if you consider that the variable - title-width , you can change both inside CSS and outside.

Note that we are obliged to put the value in the variable. Add px , % , rem , etc. to the called variable we will fail. However, nothing prevents us from multiplying with the calc function the value by one in the value we need.

 .title { --title-width: 300; /*    */ width: var(--title-width)px; /*   */ width: calc(var(--title-width) * 1px); } 

Finally

CSS variables provide a lot of flexibility, it is a powerful tool that can be very useful in some cases. However, I do not recommend to rush it in combat projects. If we look at caniuse , we will see that IE does not support this technology at all, and partially the Edge .