CSS“变量”小知识

不二如是 · 发表于 2018-11-30 09:41:40

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

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帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

zhn620@qq.com · 发表于 2019-1-4 10:10:18

马上学习！！！！！！

chhch · 发表于 2019-1-6 15:03:33

谢谢分享！

hch838 · 发表于 2019-4-21 18:01:36

Qmh · 发表于 2019-7-17 22:47:29

鱼豆腐爱吃猫 · 发表于 2019-12-11 13:33:44

tianyuan · 发表于 2020-6-28 15:47:39

群里最菜的一个 · 发表于 2020-7-11 17:15:04

看看

qiuwanzi · 发表于 2020-7-14 23:06:29

查看

小马哥学编程 · 发表于 2021-4-14 15:34:31

Rydia · 发表于 2021-4-26 20:52:38

账号		自动登录	找回密码
密码			立即注册

[奇技淫巧] CSS“变量”小知识

马上注册，结交更多好友，享用更多功能^_^