You really need to know how to use the CSS variable var ().


As Web projects get bigger and bigger, their CSS becomes astronomical and confusing. To help us solve this problem, new CSS variables will soon appear in mainstream browsers, enabling developers to reuse and easily edit recurring CSS attributes. People who have used SASS or Less should know how good their variables are, but they are preprocessors and need to be compiled before they are used. Variables are now available in vanilla CSS, and you can use them in browsers right away!

Define and use CSS variables

Like any other CSS definition, variables follow the same scope and inheritance rules. The easiest way to use them is to make them globally available by adding declarations to the: root pseudoclass so that all other selectors can inherit it.

:root {

To access values in variables, we can use VaR (… Grammar. Note that names are case-sensitive, so – foo!= – FOO.

.element {

Browser support

Common browsers except IE are perfectly supported, so you can get more details here – I can use CSS variables. Here are a few examples to illustrate the typical usage of CSS variables. To ensure that they work properly, try to view them on one of the browsers mentioned above.

Example 1 – Theme color

Variables in CSS are most useful when we need to apply the same rules over and over to multiple elements, such as duplicate colors in topics. Instead of copying and pasting the same color every time we want to reuse it, we place it in a variable and access it from there.

Now, if our customers don’t like the blue shadows we choose, we can change the style in one place (the definition of variables) to change the color of the whole theme. Without variables, we have to search and replace each occurrence manually.

Copy the code and test it in your editor

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h3 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<! - Splitting line - >:root{
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
html {
background-color: var(--primary-color);
h3 {
border-bottom: 2px solid var(--primary-color);
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
<div class="container">
<h3> Dialog window</h3>
<p> Living an unruly life is easy to be like pushing a boat along the river, but it is difficult to get to know good friends and friends. </p>
<button>confirmation </button>

Sample address

Example 2 – Attribute class name readability

Another important use of variables is that we don’t have to remember them when we want to preserve more complex attribute values. The best examples are multiple parameters, such as CSS rules box-shadow, transform and font.

By placing attributes in variables, we can access them with semantically readable names.

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<! - Splitting line-->
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
box-shadow: var(--tiny-shadow);
transform: var(--animate-right);
<li> I'm here!</li>
<li> I'm here!</li>
<li> I'm here!</li>

Sample address

Example 3 – Dynamically changing variables

When custom attributes are declared many times, standard rules help resolve conflicts, and the final definitions in the stylesheet override those defined above.

The following example demonstrates how easy it is for users to change attributes dynamically while still keeping the code clear and concise.

*{margin: 0;padding: 0;box-sizing: border-box;}
html{background: #eee;padding: 30px;font: 500 14px sans-serif;color: #333;line-height: 1.5;}
.blue-container{background: #64B5F6;padding-left: 50px;}
.green-container{background: #AED581;padding-left: 50px;}
.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<! - Splitting line-->
--title-text: 18px;
--main-text: 14px;
--title-text: 24px;
--main-text: 16px;
--title-text: 30px;
--main-text: 18px;
font-size: var(--title-text);
font-size: var(--main-text);
<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">This is a title.</p>
<p class="content">Hovering over different color areas can change the size of this text and title. </p>

Sample address

As you can see, CSS variables are very simple and easy to use, and developers don’t have to spend too much time starting to apply them everywhere. The following are extensions:

The var () function has two parameters. If the custom attribute fails, it can be used to provide a fallback value:

width: var(–custom-width, 20%);

Custom properties can be nested:

  • –base-color: #f93ce9;
  • –background-gradient: linear-gradient(to top, var(–base-color), #444);

Variables can be used in conjunction with another new feature of CSS, the calc () function.

  • –container-width: 1000px;
  • max-width: calc(var(–container-width) / 2);

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.