原生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>