CSS变量的定义和使用 var(变量)

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>