你真的需要了解一下CSS变量 var()的用法

小伙伴们有没有觉得学习数据库很有意思？有意思就对了！今天就给大家带来《你真的需要了解一下CSS变量 var()的用法》，以下内容将会涉及到MySQL、nginx、github、spring、javascript，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，它让开发人员能够重用并轻松编辑重复出现的CSS属性。用过SASS或Less的人应该知道他的变量功能有多棒，但这些变量是预处理器，需要在使用前进行编译。现在变量在vanilla CSS中可用，您可以立即在浏览器中使用它们！

定义和使用CSS变量

与任何其他CSS定义一样，变量遵循相同的范围和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用，以便所有其他选择器都可以继承它。

示例地址
<p><strong>示例2 – 属性类名可读性</strong></p>
<p>变量的另一个重要用途是当我们想要保存更复杂的属性值时，我们不必记住它。最好的例子就是有多个参数，如CSS规则box-shadow，transform和font。</p>
<p>通过将属性放在变量中，我们可以使用语义可读的名称来访问它。</p>
<p><code>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);
}</code></p>

示例地址
<p>正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：</p>
<p>var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：</p>
<p><code>`width``: var(–custom-width,` `20%``);`</code></p>

可以嵌套自定义属性：

• –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()的用法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多数据库知识！