CSS变量 var()的用法是什么？

定义和使用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:normal13px/1.5sans-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:15px0;}button{font-size:13px;padding:8px12px;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:2pxsolidvar(--primary-color);

}

button{

color:var(--accent-color);

border:1pxsolidvar(--accent-color);

}

<divclass="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:normal18pxsans-serif;padding:20px;transition:0.4s;margin:10px;color:#444;background-color:#fff;cursor:pointer;}

<!--分割线-->

:root{

--tiny-shadow:02px1px0rgba(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);

}

<divclass="blue-container">

<divclass="green-container">

<divclass="container">

<pclass="title">这是个标题</p>

<pclass="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(totop,var(–base-color),#444);

变量可以与CSS的另一个新增功能-calc()函数结合使用。

*–container-width:1000px;

*max-width:calc(var(–container-width)/2);