变量的申明和应用

1. 申明： --variable-name: variable-value;
申明变量时，变量名后面要加两根连词线（--）。
变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

:root{    --color: red;}

2. 应用：应用var(变量名)来应用一个变量

#div {    color: var(color)}

var()函数还能够应用第二个参数，示意变量的默认值。如果该变量不存在，就会应用这个默认值。

color: var(--foo, #7F583F);

第二个参数不解决外部的逗号或空格，都视作参数的一部分。

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

3. 变量组合应用
能够组合应用：当变量的值是字符串时，能够间接拼接，如下

:root{  --screen-category: 'category'  //变量值是字符串}body:after {  content: '--screen-category: 'var(--screen-category);  // 间接拼接}

当变量的值是数值时，必须应用calc()函数计算，就算还是简略的单位拼接

.foo {  --gap: 20;  /* 有效 */  margin-top: var(--gap)px;}.foo {  --gap: 20;  margin-top: calc(var(--gap) * 1px);}

如果变量值带有单位，就不能写成字符串。

/* 有效 */.foo {  --foo: '20px';  font-size: var(--foo);}/* 无效 */.foo {  --foo: 20px;  font-size: var(--foo);}

4. var()函数还能够用在变量的申明

:root {  --primary-color: red;  --logo-text: var(--primary-color);}

留神，变量值只能用作属性值，不能用作属性名。

.foo {   --side: margin-top;   /* 有效 */   var(--side): 20px;}

下面代码中，变量--side用作属性名，这是有效的。

二、继承和作用域

1. 作用域
应用:root{}来定义全局变量
想让变量在部分可用，就定义在某个特定的选择器下

:root{  color: red; //全局可用}.box {  --1: #369;  //只在.box这个作用域可用 }body {  background-color: var(--1, #cd0000);}

三、兼容性解决

对于不反对 CSS 变量的浏览器，能够采纳上面的写法。

a {   color: #7F583F;   color: var(--primary);}

也能够应用@support命令进行检测。

@supports ( (--a: 0)) {  /* supported */}@supports ( not (--a: 0)) {  /* not supported */}

四、js操作css变量

JavaScript 也能够检测浏览器是否反对 CSS 变量。

const isSupported =  window.CSS &&  window.CSS.supports &&  window.CSS.supports('--a', 0);if (isSupported) {  /* supported */} else {  /* not supported */}

JavaScript 操作 CSS 变量的写法。

// 设置变量 document.body.style.setProperty('--primary', '#7F583F');// 读取变量 document.body.style.getPropertyValue('--primary').trim(); // '#7F583F'  // 删除变量 document.body.style.removeProperty('--primary');

那些对 CSS 无用的信息，也能够放入 CSS 变量。

  --foo: if(x > 5) this.width = 10;

下面代码中，--foo的值在 CSS 外面是有效语句，然而能够被 JavaScript 读取。这意味着，能够把款式设置写在 CSS 变量中，让 JavaScript 读取。

所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种路径。

五、与预处理器(sass,less)比拟

1. css变量：

动态性，能够在运行时更改能够不便地从js读写 可继承，可组合，有作用域

2. 预处理器：

预处理器的变量不是动静的，在运行时不可更改预处理器的变量没有作用域的说法不能与js交互

六、罕用场景

  1. 为格调对立而应用色彩变量
  2. 统一的组件属性（布局，定位等）
  3. 防止代码冗余(响应式布局，制动动画)