A quick guide to variables in CSS (reasons for usage, syntax and examples)
I've been experimenting with CSS variables for quite some time. If you have not yet approached them, you can use this brief guide to quickly navigate everything and get to work.
What it is?
A simple application example for scope buttons:
CSS variables allow you to define reusable values in CSS.
They appeared quite a long time ago. Recently, they began to gain popularity due to broader browser support .
If you use a preprocessor, such as SASS, then you are already familiar with variables. Now you can do the same thing without a preprocessor.
Why use style variables?
Variables allow us to adhere to the DRY principle (don't repeat yourself). Thanks to them, we also have a way to create a single point of reference for duplicate values. If you use a preprocessor, then, most likely, the benefits of this approach are already familiar to you. Most often this is used to set the primary color that is used for a variety of elements.
Repeating the background color for multiple selectors.
In the fragment above, the value
#e74c3ccould and should be variable. If we make a variable from this value, we will have a single point that can be referenced. This reduces the risk of bugs and problems with style, as it facilitates further maintenance.
Creating a reference point with a variable
In the second snippet, I use the preprocessor to show how to use a variable for a value
Why not use preprocessor variables instead of native CSS variables?
Good question. In most cases, you would prefer to maintain the commitment to the preprocessor variables. This is true if you already use them. But you can take advantage of both approaches at once. This becomes relevant when the need arises to fully utilize the capabilities of native CSS variables. More on that later.
Native CSS variables should be used when:
- You do not have a preprocessor or you do not use it.
- You want to take advantage of native CSS variables.
The main advantages of native CSS variables
In my opinion, native CSS variables have two big advantages.
In addition, CSS variables allow to take into account the scope. This means that you can change, say, the style or behavior of an element by updating the value of a variable. Otherwise, you have to prescribe new styles for this element from scratch. As a result, the amount of CSS at the output decreases.
Not the most beautiful syntax
Let's take an example.
What is a pseudo-selector
:root? Everything is logical: this is the pseudo-selector of the tree root. The selector
:rootcan be used to define global variables. In this case, we define the value
rebeccapurplefor the variable
To define a variable, two hyphens are used as a prefix.
To use a variable, we need a function
And what happens when we refer to a variable whose value is not specified? In this case, you can set backup values or default values. The function
varsupports the second optional parameter corresponding to backup values or default values.
This fragment sets the source style for the tag.
button. Where possible for
background-colorthe value applied
--btn-color. If the variable does not exist or the value is not specified, the value is used
There is no need to use a variable for our foldback. You can take the value. But with variables it will be easier to maintain the code.
Please note that
button.btnno styles are declared. Instead, the value is updated. Now it is appropriate to go to cascading and scopes.
Cascading and Scopes
When working with variables, cascading is taken into account, as well as the scope of variables. In the previous example, variables are declared in a pseudo-class
:root. All variables in the selector
:roothave a global scope.
In one of the examples above
--primarywas available for all selectors. Thanks to scope, this value can be redefined. For example, we need the value to
--primarychange for the class
In this fragment, the variable value of the
dodgerblue. That is, if
buttonno class is applied to, the variable value is
rebeccapurple. However, if you apply a class
premium, the color will change to
It is worth noting that, as is the case with inline styles, inline CSS variables have the highest priority.
In this snippet, the background color of the button will matter
red, despite the fact that the class is used here
premium. This happens because the value is
--primarydescribed directly in the tag.
You can control the values of CSS variables using other CSS rules. The main approaches are media queries and state changes.
For example, the value of a variable may change when the screen width exceeds a certain value.
The change will launch a browser redraw and show the result to the user.
In this case, the background gradient will change if the width exceeds
And how to manage variables using states? For example, take
button. The CSS variable will be updated based on the state
In this case, you can customize the style of the button based on the state
setPropertyallows you to set the element style variables and manage them.
How to update a variable defined in a pseudo-class
:root? Good question. You will need to set the properties of the documents
When you can manage CSS variables in this way, many possibilities open up. It is curious to track the position of the cursor with an event
Using calc () and dropping units
Try not to use units of measure in variables. This will facilitate further maintenance.
calc()allows you to normalize and set values with the desired units.
CSS variables can even be used to store information about preferred units of measure. In the fragment, for clarity, we took "1px", but you can replace it with "1pt", "1rem", etc.
When units of measurement are contained in CSS, service also passes through CSS.
I am still learning various examples of using CSS variables. First of all, dynamic themeization comes to mind. Tracking the cursor and scrolling the screen are also interesting applications. I have prepared training materials that can be found below.
Example with a dog and a ball
Let's work one example together!
Here we just track the position of the cursor and update the position of the two emoji.
The main thing here is to move the emoji from the center point with the help
translateand at the same time apply it
transition-delayto the dog.
How to update the position? Using variables for
How to make the dog behind? It is applied
transition-delay. An uneasy slowdown effect can also be achieved with help
It only remains to update these variables for
That's all. A couple of small improvements, and it turns out something like that:
So far, working with CSS variables has been going quite smoothly. I rarely have situations when something did not work. I will give a few possibilities that I would like to see for CSS variables.
- Animation of variables. In this article I didn’t talk about animation at all. You can use variables for it. But the animation of the values themselves will not work.
- CSS variables cannot be used in selectors. This is logical, but it would be great if such an interpolation level would be available. Using variables in the nth-child selector would be cool.
I like working with CSS variables. The more I do them, the more applications come to mind.
Thanks to this article, you yourself can start learning CSS variables.
If you are interested in getting a more detailed overview of CSS variables, watch this video .
LOOKING.HOUSE - on the project collected more than 150 points looking glass in 40 countries. You can quickly execute the host, ping, traceroute, and mtr commands.