You really need to understand the use of CSS variables var()

When a web project gets bigger and bigger, its CSS will become astronomically large and messy. To help us solve this problem, new CSS variables will soon be available in major browsers, allowing developers to reuse and easily edit recurring CSS properties. Anyone who has used SASS or Less should know how great its variable function is, but these variables are preprocessors and need to be compiled before use. Now that variables are available in vanilla CSS, you can use them in your browser right away!

Defining and using CSS variables

Variables follow the same scope and inheritance rules as any other CSS definition. The simplest way to use them is to make them globally available by adding the declaration to the :root pseudo-class so that all other selectors can inherit it.

:root {
  --awesome-blue:#2196F3;
}

To access the value in a variable, we can use the var(...) syntax. Note that names are case sensitive, so –foo != –FOO .

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

Browser support

It is perfectly supported by all common browsers except IE, you can get more details here – I can use CSS variables. Below are a few examples showing typical uses of CSS variables. To make sure they are working properly, try viewing them on one of the browsers we mentioned above.

Example 1 – Theme Colors

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

Now, if our clients don’t like the shade of blue we chose, we can change the style in one place (the definition of the variable) to change the color of the entire theme. Without variables, we have to manually search and replace every occurrence.

You can 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;}
<!-- Dividing 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>It is easy to lead a bohemian life, but it is difficult to make good friends. </p>
<button>Confirm</button>
</div>

Example Address

Example 2 - Attribute Class Name Readability

Another important use of variables is when we want to save a more complex property value so we don't have to remember it. The best example of this is CSS rules with multiple parameters, such as box-shadow, transform, and font.

By placing the property in a variable, we can access it using a semantically readable name.

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;}
<!-- Dividing line-->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}

<ul>
<li>I'm here!</li>
<li>I'm here!</li>
<li>I'm here!</li>
</ul>

Example Address

Example 3 – Dynamically changing variables

When custom properties are declared multiple times, standard rules help resolve conflicts; the last declaration in a stylesheet overrides the ones above it.

The following example demonstrates how easy it is to dynamically change properties 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;}
<!-- Dividing line-->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
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">Hover your mouse over the different colored areas to change the size of this text and title. </p>
</div>
</div>
</div>

Example Address

As you can see, CSS variables are very simple and easy to use, and developers don’t have to spend too much time to start applying them everywhere. Here are the extensions:

The var() function takes two parameters, which can be used to provide fallback values ​​if the custom property fails:

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 addition to CSS - the calc() function.

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.