What is the usage of CSS variable var()? Detailed explanation of the usage of CSS variable var()

When a web project gets bigger, its CSS can become astronomically large and cluttered. To help us solve this problem, new CSS variables will soon appear 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 instantly! [Recommended reading: CSS Tutorial]

Defining and using 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 the declaration to the :root pseudo-class so that all other selectors can inherit it.

html：

: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

Commonly used browsers except IE are perfectly supported. You can get more details here – [I can use CSS variables](https://caniuse .com/#search=var()). 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 client doesn't like the shade of blue we choose, 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;}
<!-- 分割线 -->: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>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>

Example 2 - Attribute class name readability

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

By placing a 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;}
<!-- 分割线 -->
: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>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

Example 3 – Dynamically changing variables

Standard rules help resolve conflicts when a custom property is declared multiple times, and the last one defined in the stylesheet overrides the ones defined above.

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

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.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">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

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

Custom attributes 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 detailed content of What is the usage of CSS variable var()? Detailed explanation of the usage of CSS variable var(). For more information, please follow other related articles on the PHP Chinese website!