CSS“变量”小知识
本帖最后由 不二如是 于 2020-3-17 19:01 编辑本次我来给大家科普一下，CSS中如何使用“变量”。
CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。
接下来，我要CV几行官方定义，建议不看...
使用自定义属性来设置变量名，并使用特定的 var() 来访问，比如：
color: var(--main-color);
CSS 变量当前有两种形式：
**** Hidden Message *****
声明
声明变量的时候，变量名前面要加两根减号（--）：
body{
--pborder:1px solid black;
--pcolor:red;
}
上面代码中，body选择器里面声明了两个变量：--pborber和--pcolor。
它们与border、color等正式属性没有什么不同，只是没有默认含义。
所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。
因为变量与自定义的 CSS 属性其实是一回事。
你可能会问，为什么选择两根连词线（--）表示变量？
因为$被 JQ 用掉了，@被 Less 用掉了，所以为了不产生冲突，官方的 CSS 变量就改用两根连词线了。
各种值都可以放入 CSS 变量，px，#颜色、rem、calc（）哈
变量名大小写敏感，--color和-Color是两个不同变量。
var（）
创建好变量了，接下来就是如何调用了，没错var（）闪亮登场了。
它用于读取变量：
.div1 {
border:var(--pborder);
background: var(--pcolor);
}
ar()函数还可以使用第二个参数，表示变量的默认值。
如果该变量不存在，就会使用这个默认值：
background: var(--pcolor,#000);
var()函数还可以用在变量的声明（变量调用变量）：
:root {
--myColor: red;
--uText: var(--myColor);
}
注意，变量值只能用作属性值，不能用作属性名：
.div1 {
--side: margin-top;
/* 无效 */
var(--side): 33px;
}
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*创建两个css变量*/
body{
--pborder:1px solid black;
--pcolor:red;
}
.div1 {
border:var(--pborder);
background: var(--pcolor);
height: 100px;
width: 100px;
font-size: 30px;
}
.div2 {
border:var(--foo,10px solid #e1968e);
background: var(--bar, #6e89ff);
height: 100px;
width: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="div1">我是d1</div>
<div class="div2">在下D2</div>
</body>
</html>
作用域
同一个 CSS 变量，可以在多个选择器内声明。
读取的时候，优先级最高的声明生效。
这与 CSS 的"层叠"（cascade）规则是一致的。
（推荐：0 0 3 4 - CSS选择器优先级 | 全网最粗暴有效）
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
</head>
<body>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
</body>
</html>
上面代码中，三个选择器都声明了--color变量。
不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
这就是说，变量的作用域就是它所在的选择器的有效范围。
这就是说，变量的作用域就是它所在的选择器的有效范围：
body {
--a #7F583F;
}
.content {
--b: #F7EFD2;
}
上面代码中，变量--a的作用域是body选择器的生效范围，--b的作用域是.content选择器的生效范围。
由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 马上学习！！！！！！ 谢谢分享！ {:5_109:} {:10_257:} 。 {:10_277:} 看看 查看 1 m
页:
[1]