css变量

一、变量的声明及使用

声明声明，在变量名前加 --；

变量的使用，用var（）调用；

:root{   --myColor: deepskyblue;}body{   background: var(--myColor);}

　　上面伪类root中定义了变量--myColor，它与正式属性没有什么不同，所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。

把css变量直接看成属性就行，更好理解。

CSS变量使用完整语法

　　CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? )，

意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子：

.box {
  --1: #369;
}
body {
  background-color: var(--1, #cd0000);
}

则此时的背景色是#cd0000：

　　变量名的命名不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文。css变量没有不能以数字开头的规定，所以一下写法都合法：

:root{    --1: red;    --蓝色：blue;}

二、变量的意义

在第三方语法如sass中可以定义变量，但是浏览器只能识别CSS文件，scss文件需要通过编译转化为css文件，在css中没有变量，属性值就不能根据变量动态修改；

原生css有变量了以后，可以降低维护难度，在项目中也能通过直接改变变量值来修改属性。

三、变量值的类型

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

--bar: ‘hello‘;
--foo: var(--bar)‘world‘;

如果变量值是数值，不能与数值单位直接连用。

:root{
 --he: 10;
 /*无效的*/
 height: var(--he)px;
}

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

:root{
 --he: 10;
 height: calc(var(--he)*1px);
}

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

    /* 无效 */
    .root {
      --sz: ‘20px‘;
      font-size: var(--sz);
    }

    /* 有效 */
    .root {
      --sz: 20px;
      font-size: var(--sz);
    }

四、作用域

　　同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

如下例子：

:root { --color: purple; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>紫色继承于根元素</p>
<div>绿色来自直接设置</div>
<div id=‘alert‘>
  ID选择器权重更高，因此这是是红色！
  <p>我也是红色，占了继承的光</p>
</div>

上面这个例子我们可以获得这些信息：

1. 变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如#alert定义的变量，只有id为alert的元素才能享有。如果你想变量全局使用，则你可以设置在:root选择器上；
2. 当存在多个同样名称的变量时候，变量的覆盖规则由CSS选择器的权重决定的，但并无!important这种用法，因为没有必要，!important设计初衷是干掉JS的style设置，但对于变量的定义则没有这样的需求。

五、参考链接

1. http://www.zhangxinxu.com/wordpress/?p=5804

2. http://www.ruanyifeng.com/blog/2017/05/css-variables.html

3. https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables