马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-3-17 19:01 编辑
本次我来给大家科普一下，CSS中如何使用“变量”。
CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。
接下来，我要CV几行官方定义，建议不看...
使用自定义属性来设置变量名，并使用特定的 var() 来访问，比如： color: var(--main-color);
CSS 变量当前有两种形式：
声明
声明变量的时候，变量名前面要加两根减号（--）： 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里面，确保任何选择器都可以读取它们。
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-11-30 09:41:40
置顶卡
千斤顶
显身卡
发表于 2019-1-4 10:10:18
发表于 2019-1-6 15:03:33
