定义和运用CSS变量
与任何其他CSS定义一样，变量遵照雷同的局限和继续划定规矩。运用它们的最简朴要领是经由过程将声明添加到:root伪类来使它们全局可用，以便一切其他挑选器都能够继续它。
html：
:root {
--awesome-blue：＃2196F3;
}
要接见变量中的值，我们能够运用var(…)语法。请注意，称号辨别大小写，因而–foo != –FOO。
.element {
background-color:var(--awesome-blue);
}
浏览器支撑
经常使用的浏览器除了IE都圆满支撑，您能够在此处猎取更多细致信息 –[我能够运用CSS变量](https://caniuse.com/#search=var())。下面是几个例子，展现了CSS变量的典范用法。为确保它们一般事情，请尝试在我们上面提到的个中一个浏览器上检察它们。
示例1 – 主题色彩
当我们需要对多个元素一遍又一遍地运用雷同的划定规矩时，CSS中的变量是最有效的，比方主题中的反复色彩。我们不是每次想要反复运用雷同色彩时举行复制和粘贴，而是将其放在变量中并从那边接见它。
如今，假如我们的客户不喜欢我们挑选的蓝色暗影，我们能够在一个处所（变量的定义）转变款式来转变全部主题的色彩。没有变量，我们必需手动搜刮和替代每一次涌现。
可将代码复制下来在你的编辑器内里测试
* {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>
示例2 – 属性类名可读性
变量的另一个主要用处是当我们想要保留更庞杂的属性值时，我们没必要记着它。最好的例子就是有多个参数，如CSS划定规矩box-shadow，transform和font。
经由过程将属性放在变量中，我们能够运用语义可读的称号来接见它。
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>
示例3 – 动态更转变量
当屡次声明自定义属性时，规范划定规矩有助于处理争执，款式表中末了定义的会掩盖上面定义的。
下面的示例演示了用户动态操纵转变属性是何等轻易，同时依然坚持代码清楚简约。
.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%``);
能够嵌套自定义属性：
* –base-color: #f93ce9; * –background-gradient: linear-gradient(to top, var(–base-color), #444);
变量能够与CSS的另一个新增功用- calc() 函数连系运用。
* –container-width: 1000px; * max-width: calc(var(–container-width) / 2);
以上就是CSS变量 var()的用法是什么？CSS变量 var()的用法详解的细致内容，更多请关注ki4网别的相干文章！
