CSS变量 var()的用法是什么？
导读： 定义和使用CSS变量 与任何其他CSS定义一样，变量遵循相同的范围和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用，以便所有其他选择器都可以继承它。 html： :root{ --...
定义和使用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);
}
对话框窗口
过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。
确认 示例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); }- 我在这里!
- 我在这里!
- 我在这里!
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS变量 var()的用法是什么？
本文地址： https://pptw.com/jishu/664705.html