当 web 项目变得越来越大时, 他的 CSS 会变得像天文数字那么大而且还变得混乱. 为了帮助我们解决这个问题, 新的 CSS 变量很快就会出现在主流浏览器中, 它让开发人员能够重用并轻松编辑重复出现的 CSS 属性. 用过 Sass 或 Less 的人应该知道他的变量功能有多棒, 但这些变量是预处理器, 需要在使用前进行编译. 现在变量在 vanilla CSS 中可用, 您可以立即在浏览器中使用它们!
定义和使用 CSS 变量
与任何其他 CSS 定义一样, 变量遵循相同的范围和继承规则. 使用它们的最简单方法是通过将声明添加到: root 伪类来使它们全局可用, 以便所有其他选择器都可以继承它.
: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>
示例地址 https://codepen.io/w3cbest/pen/xmLvoV
示例 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>
示例地址 https://codepen.io/w3cbest/pen/LMjwKb
示例 3 - 动态更改变量
当多次声明自定义属性时, 标准规则有助于解决冲突, 样式表中最后定义的会覆盖上面定义的.
下面的示例演示了用户动态操作改变属性是多么容易, 同时仍然保持代码清晰简洁.
- *{
- margin: 0;padding: 0;box-sizing: border-box;
- }
- HTML{
- background: #eee;padding: 30px;font: 500 14px sans-serif;color: #333;line-height: 1.5;
- }
- .blue-container{
- background: #64B5F6;padding-left: 50px;
- }
- .green-container{
- background: #AED581;padding-left: 50px;
- }
- .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);
为了学习工作与休闲娱乐互不冲突, 现新建圈[码农茶水铺] 用于程序员生活, 爱好, 交友, 求职招聘, 吐槽等话题交流, 希望各位大神工作之余到茶水铺来喝茶聊天. 群号: 582735936
**[了解更多](http://qm.qq.com/cgi-bin/qm/qr?k=EH-M7wq6c7VHXkRrNUeae25NUlXHVhwj)**
来源: http://www.qdfuns.com/article/51116/2a529b08f8e6806a9efc9ed615007cdf.html