1. CSS变量的定义和调用

• CSS中原生的变量定义语法是：变量名前面要加两根连词线 --*
• 变量使用语法是：var()函数用于读取变量 var(--*)
• 其中 * 表示我们的变量名称
• 变量名大小写敏感，--header-color和--Header-Color是两个不同变量

2. 全局/局部变量的定义

1
2
3
4
5
6
7
8
// 全局变量
:root { --color: blue; }
.box{color: var(--color)}
// 局部变量
.box{
--color: red;
color: var(--color);
}

3. CSS变量的参数

• var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
• 第二个参数不处理内部的逗号或空格，都视作参数的一部分;

复制代码color: var(--foo, #7F583F); var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px 15px 20px);

1
2
3
color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

4.  CSS变量的拼接和计算

• 如果变量值是一个字符串，可以与其他字符串拼接；
• 如果变量值是数值，不能与数值单位直接连用;
• 如果变量值带有单位，就不能写成字符串;

复制代码// 字符串 --bar: 'hello'; --foo: var(--bar)' world'; // 变量值是数值 foo { --gap: 20; margin-top: var(--gap)px; /* 无效 */ } // 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc() 函数，将它们连接， foo { --gap: 20; margin-top: calc(var(--gap) * 1px); } // 变量值带有单位 .foo { --foo: '20px'; font-size: var(--foo); /* 无效 */ } .foo { --foo: 20px; font-size: var(--foo); /* 有效 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 字符串
--bar: 'hello';
--foo: var(--bar)' world';
// 变量值是数值
foo {
--gap: 20;
margin-top: var(--gap)px;
/* 无效 */
}
// 上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc() 函数，将它们连接，
foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
// 变量值带有单位
.foo {
--foo: '20px';
font-size: var(--foo);
/* 无效 */
}
.foo {
--foo: 20px;
font-size: var(--foo);
/* 有效 */
}

 5. CSS变量的作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的；

复制代码<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style> <p>蓝色</p> <div>绿色</div> <div id="alert">红色</div>

1
2
3
4
5
6
7
8
9
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

最后

以上就是寒冷乌冬面最近收集整理的关于CSS变量的定义和使用 var(变量)1. CSS变量的定义和调用2. 全局/局部变量的定义3. CSS变量的参数4.  CSS变量的拼接和计算 5. CSS变量的作用域的全部内容，更多相关CSS变量的定义和使用内容请搜索靠谱客的其他文章。