原生CSS变量

原生CSS 变量

css中我们可以统一设置 变量 方便页面维护

声明

变量声明的时候，变量名之前加上两根连词线（–）即可。例如：

声明的变量是有作用域的，比如是在html中声明的变量，那么该变量在html中的任何地方都可以使用这个变量，如果该变量在p标签中声明的，那么只能在p标签下使用这个变量。

body {--foo: #7F583F;--bar: #F7EFD2;
}/* foo 与 bar是变量名称 他们的值分别是 #7F583F 和 #f7EFD2*/
变量大小写敏感、变量名等这些参考 js 变量名规则肯定不会错，而变量名中存储的值的书写规则仍然采用 css 的规则，如：  --x: 20px 30px  而不是 --x: '20px 30px' 。

变量使用：var() 函数

var() 函数是用来读取变量，如下例：

a {--foo：#f1f2f5;--bar: red;color: var(--foo);text-decoration-color: var(--bar);
}

var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。并且，第一个参数后面的全部算第二个参数，不管有多少个逗号，比如：

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

另外， var() 函数也可作为其他变量的值，但也仅作为其他变量的值使用：

html{--primary-color: red;--logo-text: var(--primary-color);/* 无效 */  var(--primary-color): green;  
}

变量作用域

css变量遵从 css优先级的原则 变量值会被覆盖

  	html {--color: blue;}div {--color: green;}#alert {--color: red;}* {color: var(--color);}

<p> 我的颜色为 blue</p>
<div>我的颜色为 green</div>
<div id="alert">我的颜色为 red</div>