本文摘自PHP中文网，作者云罗郡主，侵删。
当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，它让开发人员能够重用并轻松编辑重复出现的CSS属性。用过SASS或Less的人应该知道他的变量功能有多棒，但这些变量是预处理器，需要在使用前进行编译。现在变量在vanilla CSS中可用，您可以立即在浏览器中使用它们！【推荐阅读：CSS教程】定义和使用CSS变量
与任何其他CSS定义一样，变量遵循相同的范围和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用，以便所有其他选择器都可以继承它。
html：
1 2 3 | :root {
--awesome-blue：＃2196F3;
}
|
要访问变量中的值，我们可以使用var(…)语法。请注意，名称区分大小写，因此?Cfoo != ?CFOO。
1 2 3 | .element {
background-color:var(--awesome-blue);
}
|
浏览器支持
常用的浏览器除了IE都完美支持，您可以在此处获取更多详细信息 ?C[我可以使用CSS变量](https://caniuse.com/#search=var())。下面是几个例子，展示了CSS变量的典型用法。为确保它们正常工作，请尝试在我们上面提到的其中一个浏览器上查看它们。
示例1 ?C 主题颜色
当我们需要对多个元素一遍又一遍地应用相同的规则时，CSS中的变量是最有用的，例如主题中的重复颜色。我们不是每次想要重复使用相同颜色时进行复制和粘贴，而是将其放在变量中并从那里访问它。
现在，如果我们的客户不喜欢我们选择的蓝色阴影，我们可以在一个地方（变量的定义）改变样式来改变整个主题的颜色。没有变量，我们必须手动搜索和替换每一次出现。
可将代码复制下来在你的编辑器里面测试
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | * {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);
}
|
1 2 3 4 5 | <div class="container">
<h3>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>
|
示例2 ?C 属性类名可读性
变量的另一个重要用途是当我们想要保存更复杂的属性值时，我们不必记住它。最好的例子就是有多个参数，如CSS规则box-shadow，transform和font。
通过将属性放在变量中，我们可以使用语义可读的名称来访问它。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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);
}
|
1 2 3 4 5 | <ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>
|
示例3 ?C 动态更改变量
阅读剩余部分
相关阅读 >>
css变量 var()的用法是什么？css变量 var()的用法详解
vue使用css变量实现切换主题功能
更多相关阅读请进入《css变量》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS变量 var()的用法是什么？CSS变量 var()的用法详解
