CSS 变量

在任何一门语言中，变量的存在都是必不可少的，使用变量可以很方便的复用很多信息，比如网页的配色方案，使用方案只需要修改几个变量值即可完成对整个页面的配色的修改。而且变量本身包含了语义信息，更容易理解，比如 main-text-color 相对 #333 更容易理解。以前只能通过预处理器 Sass 、Less 等使用变量，而现在原生 css 终于也添加了变量的引入。

首先看一下 css 变量的兼容性：

从兼容性表格可以看出，css 变量的兼容性已经非常好了，主流浏览器 Chrome 、Safari 、Firefox 的支持度都挺高的。接下来开始使用：

变量声明和使用

变量的声明使用两个连词线 -- ，而变量的使用则使用 var() 函数：

:root {
  --color-main-text: #333;
  --color-bg: #f6f6f6;
}

body {
  color: var(--color-main-text);
  background: var(--color-bg);
}

变量只能用作属性值，不能 用作属性名：

:root {
  --pdt: padding-top;
}

.content {
  var(--side): 10px; /* 不生效 */
}

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

body {
  color: var(--color-main-text, #333);
  background: var(--color-bg);
  margin: var(--body-margin, 10px 30px);
  font-family: var(--font-family, 'Microsoft YaHei', tahoma, arial, "Hiragino Sans GB", simsun, sans-serif);
}

注意，第二个参数内容的空格和逗号也不再做处理，上例子中 margin 和 font 的默认值分别为后面的带空格的上下、左右边距值和带逗号的一长串字体名。

上面提到变量不存在才使用默认值，但是当变量不合法的时候则使用属性的缺省值：

body {
  --color: 10px;
  color: red;
  color: var(--color, blue); /* color为默认的黑色 */
}

此时，颜色不是 --color 的值不是合法的颜色值，而最终结果也不是默认参数值 blue 而是此属性的默认值黑色。

变量拼接

当变量类型是字符串的话，可以直接和字符串拼接：

body {
  --hello: 'hello';
  --hw: var(--hello)' world'; /* hello world */
}

变量的类型为数值，则不能直接和单位一起拼接，必须使用 calc() 函数：

body {
  --gap: 20;
  margin-top:　var(--gap)px; /* 无效 */
  margin-bottom:　calc(var(--gap) * 1px); /* 有效 */
}

当然也可以直接定义变量的属性值包含单位，但是如果带有单位就不能写成字符串形式：

body {
  --gap: 20px;
  margin-top:　var(--gap); /* 有效 */
  --gap2: '20px';
  margin-top:　var(--gap2)px; /* 无效 */
}

作用域

css 变量实际上是 css 自定义属性（custom properties），从这一点出发就很容易理解 css 变量的作用域了，也就是说 css 的作用于实际上是依托于 css 的级联规则：

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

<p>blue</p>
<div>green</div>
<div id='alert'>
  red
  <p>red too, because of inheritance!</p>
</div>

不同元素读取的颜色值和其对应规则的优先级有关，因此文字呈现的颜色不一样。

媒体查询

对于页面动态变化的情况，可以在 @media 命令中声明变量，比如根据屏幕的宽度不同为元素设置不同的宽度：

body {
  --width: 980px
}

@media screen and (max-width: 1200px) {
  body {
    --width:  80%;
  }
}

兼容检查

属性兼容性判断，可以使用 css 的 @support 检查：

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

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

}

也可以使用js：

const isSupportCssProperty =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

JavaScript操作

使用js修改属性的基本语法如下：

// 设置变量
document.body.style.setProperty('--primary', 'green');

// 读取变量
document.body.style.getPropertyValue('--primary'); // 'green'

// 删除变量
document.body.style.removeProperty('--primary');

在一些动态改变位置的场合会很有用，比如随着滚动条滚动始终保持当前位置

总结

和 less 、 sass 相比，语法较为繁琐，但是仔细看看还是有一些特点的，比如变量根据级联的优先级、媒体查询的动态赋值特性，在某些特定的应用场景下或许会更有用。

参考

CSS Custom Properties for Cascading Variables Module Level 1