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

原创 黎云锐 教程 前端 1239阅读 2019-01-18 22:03:06 举报

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

定义和使用CSS变量

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

要访问变量中的值,我们可以使用var(…)语法。请注意,名称区分大小写,因此–foo != –FOO。

浏览器支持

常用的浏览器除了IE都完美支持,您可以在此处获取更多详细信息 –[我可以使用CSS变量](https://caniuse.com/#search=var())。下面是几个例子,展示了CSS变量的典型用法。为确保它们正常工作,请尝试在我们上面提到的其中一个浏览器上查看它们

示例1 – 主题颜色

当我们需要对多个元素一遍又一遍地应用相同的规则时,CSS中的变量是最有用的,例如主题中的重复颜色。我们不是每次想要重复使用相同颜色时进行复制和粘贴,而是将其放在变量中并从那里访问它。

现在,如果我们的客户不喜欢我们选择的蓝色阴影,我们可以在一个地方(变量的定义)改变样式来改变整个主题的颜色。没有变量,我们必须手动搜索和替换每一次出现。

可将代码复制下来在你的编辑器里面测试

示例地址

示例2 – 属性类名可读性

变量的另一个重要用途是当我们想要保存更复杂的属性值时,我们不必记住它。最好的例子就是有多个参数,如CSS规则box-shadow,transform和font。

通过将属性放在变量中,我们可以使用语义可读的名称来访问它。

示例地址

示例3 – 动态更改变量

当多次声明自定义属性时,标准规则有助于解决冲突,样式表中最后定义的会覆盖上面定义的。

下面的示例演示了用户动态操作改变属性是多么容易,同时仍然保持代码清晰简洁。

```<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复