CSS变量（CSS variable）— CSS自定义属性

CSS 变量（CSS variable）又叫做“CSS 自定义属性”，通过声明CSS变量来设置通用的颜色、字号等，实现统一页面风格，方便后期维护，减轻开发量。

声明全局变量

在变量名称前加两个中横线 --（使用--是因为$被Sass占用，@被Less占用）

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

说明：body中声明了FontColor，BackGround的全局变量

我们也可以使用:root{}来存放所有变量，各种值都可以放入css变量中

/* 全局变量 */
:root{
　　--Colors:#2C51CD;
　　--fZ16px:16px;
　　--main-color: #4d4e53;
　　--header-height: 68px;
　　--transition-duration: .5s;
　　--margin-top: calc(2vh + 10px);
　　--theme-bg: #f1f1f1;
}

说明：在:root中声明相当于全局属性，:root选择器是一个伪类，匹配文档的根元素，所有主流浏览器均支持 :root （除 IE8及以下）。

在HTML中，根元素永远是HTML

注意：声明变量对大小写敏感（colors和Colors表示两个不同的变量）

读取变量

使用var()函数来读取变量，var函数有两个参数，插入自定义的属性值

var(custom-property-name, value)

• custom-property-name 必需，变量名
• value 可选，当属性不存在的时候使用

.box-wraper{
  background-color: var(--theme-bg);
}

说明：–theme-bg即使用的变量，将变量设置到根元素:root上，下面的元素.box-wraper即可在css中使用这个变量

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

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

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

:root {
  --color1: pink;
  --color2: aquamarine;
  --bg: linear-gradient(to right, var(--color1), var(--color2));
}

变量值的类型

变量值是一个字符串，可以和其他字符串拼接

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

变量值是一个数值，不可以和其他字符串拼接，但可以通过calc()函数，将他们拼接起来

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

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

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

变量的作用域

变量的作用域分为全局作用域和局部作用域

在:root中申明的CSS变量即全局作用域的变量，即能够在CSS中任意地方应用；

局部作用域总是可以访问外层作用域或者全局作用域的变量，反之则不可；

<div class="parent">
	parent
	<div class="child">childdiv>
div>
 
<style>
.parent {
  --bgColor: pink; /* 局部变量 */
  color: var(--color); /* 使用子级变量无效 */
}
.child {
  background: var(--bgColor); /* 使用父级变量有效 */
  --color: red;
  color: var(--color);
}
style>

实际项目开发过程中，都会设置字体颜色，背景色，字体大小等等，页面多次使用，或者项目主题化时，往往要大量修改，增加后期维护成本，我们可以设置一个全局的css文件，声明一些可复用的全局变量，不仅可以统一页面风格，更方便后期维护，大大提高了开发效率。

/* 创建一个 base.css文件 */
:root{
	--theme-bg: #f1f1f1;
	--color-text: 333; /* 普通字体颜色 */
	--color-high-text: blue; /* 高亮文字颜色 */
}
 
/* vue项目可以在main.js引入 */
@import "assets/css/base.css";
 
/* 使用 */
body {
	background: var(--theme-bg);
	color:var(--color-text)
}
.active{
	color: var(--color-high-text)
}

变量的作用域的强大之处，有助于系统开发代码整洁规范、模块化，当我们想要主题化某一个模块时，可以在当前模块的根元素中设置CSS变量，以便于变量向下传递，而且不会影响其他模块的元素。

注意：合理运用作用域层级和CSS变量赋值，在定义CSS变量时不能出现循环依赖关系，这会导致页面无法加载，尽量避免代码结构过于复杂以及影响页面渲染性能。