为了统一页面风格在编写CSS样式文件时经常会大量复用相同的颜色或者字号，加重开发工作量的同时也不利于后期的维护，所以需要用到CSS全局变量。

声明全局变量

CSS全局变量的声明是在变量名称前加两个中横线--。

body {
  --Color: #2C51CD;
  --BackGround: #B4D4FD;
}

上述代码中，body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了，@被Less占用了。

“
变量的声明对大小写敏感。如：Color和color表示两个不同的变量。

读取变量

使用var()函数来读取变量。

p {
  background: var(--Color);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

p {
  background: var(--Color, #2C51CD);
}

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

p {
  font-family: var(--fontF, "Roboto", "Helvetica");
  margin: var(--Margins, 15px 20px 25px);
}

var()函数还可以用在变量声明中

body {
  --Color: #2C51CD;
  --BackGround: var(--Color);
}

“
变量只能作为属性值，不能作为属性名

变量值的类型

如果变量值是字符串，则可以与其他字符串拼接

:root {
  --Hi: 'hello';
  --Name: var(--Hi)',world';
}

如果是数值，则不可以拼接

:root {
  --pSizeVal: 20;
  --pSize: var(--pSizeVal)'px'; //无效
}

但可以通过calc()函数，将他们拼接起来

:root {
  --pSizeVal: 20;
  --pSize: calc(var(--pSizeVal)*1px);
}

如果变量值带单位，则不能写成字符串形式

:root {
  --pSize: '20px';
  margin-top: var(--pSize); //无效
}

:root {
  --pSize: 20px;
  margin-top: var(--pSize); //有效
}

作用域

变量的作用域就是它所在的选择器的有效范围。

<style>
  :root {
    --Color: blue;
  }
  div {
    --Color: green;
  }
  #alert {
    --Color: red;
  }
  * {
    color: var(--Color);
  }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--Color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

所以一些通用的变量值，最好声明在--root{}内。

转自CSS变量:声明全局变量，让编写更快捷 --root

CSS 全局变量的使用

声明全局变量

读取变量

变量值的类型

作用域