登录  /  注册
首页 > web前端 > css教程 > 正文

CSS变量 var()的用法是什么?CSS变量 var()的用法详解

云罗郡主
发布: 2019-01-21 13:30:14
原创
4791人浏览过

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

定义和使用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()的用法详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号