1. CSS变量的定义和调用

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

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

// 全局变量
: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);

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);
/* 有效 */
}

 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>

最后

以上就是寒冷乌冬面为你收集整理的CSS变量的定义和使用 var(变量)1. CSS变量的定义和调用2. 全局/局部变量的定义3. CSS变量的参数4.  CSS变量的拼接和计算 5. CSS变量的作用域的全部内容，希望文章能够帮你解决CSS变量的定义和使用 var(变量)1. CSS变量的定义和调用2. 全局/局部变量的定义3. CSS变量的参数4.  CSS变量的拼接和计算 5. CSS变量的作用域所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。