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

2024-01-17 10:16 小编

定义和使用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);


Tag: 什么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码