不容错过的CSS变量

原文连接: Don't miss out on css variables

当我第一次据说CSS变量时，我是抱着怀疑态度的。scss、sass、less和stylus这些CSS预处理器不是都有变量机制吗? 为何还要使用它？过了几年，我发现愈来愈多的人开始讨论和使用它，我以为我是错过了什么…… 虽然花费了一点功夫，但在使用后，我确实被它吸引住了。这篇文章我会阐述究竟是什么推进我进一步去探索CSS变量，并在实际项目中使用它。

译者注:
本文并不是彻底照搬原文，即意译. 另外女友也给我校验过了，确保大致没有搞错😂
由于笔者本身原创的文章阅读量比较惨淡，因此笔者近期会尝试翻译一些文章，学习这些文章是怎么写的，也积攒点人气，以便后面原创文章有更多阅读量

用法

在选择器里面声明变量，变量名以--做为前缀:

div {
  --bgColor: deeppink;
}
复制代码

一个流行的方式是在:root选择器中定义变量，这至关于定于全局变量:

:root {
  --bgColor: teal;
}
复制代码

经过var()函数来引用变量:

div {
  background: var(--bgColor);
}
复制代码

var()函数还能够接受一个参数，用做变量的默认值，当变量未定义时回退到这个默认值:

header {
  background: var(--bgColor);
  color: var(--color, beige);
}
复制代码

上面代码的运行结果以下:

主题

利用CSS变量，能够很容易地实现主题机制.

在body元素上为不一样的主题建立不一样的类名，并定义合适的变量值:

body.sunrise {
  --background-color: #fff;
  --text-color: #333;
}

body.sunset {
  --background-color: #333;
  --text-color: #fff;
}
复制代码

使用这些变量:

html,
body {
  background: var(--background-color);
  color: var(--text-color);
}
复制代码

如今切换body元素的类名到sunrise或sunse，CSS变量会叠层应用到全部选择器. 效果以下:

Javascript API

我以为这是CSS变量最好的部分 —— CSS变量能够经过Javascript API来获取和设置。SCSS/Less这些预处理器的变量可作不到(部分预处理器已支持编译到到CSS变量)。

经过getPropertyValue方法来获取变量:

getComputedStyle(document.documentElement).getPropertyValue('--color')
复制代码

若是要获取具体元素的的变量值, 先经过querySelector获取元素：

getComputedStyle(document.querySelector('h1')).getPropertyValue('--color')
复制代码

经过style.setProperty来设置变量值：

document.documentElement.style.setProperty('--color', 'red')
复制代码

设置具体元素的变量值:

document.querySelector('h1').style.setProperty('--color', 'blue')
复制代码

这个API提供了一个简洁的方式来使用CSS变量.

几天前, 我经过David K的XState DEMO接触到了这个使用场景: 当用户鼠标拖拽时, 经过CSS变量来肯定选择框的定位(基于鼠标的开始位置和当前位置):

.selectbox {
  left: calc(var(--mouse-x1));
  top: calc(var(--mouse-y1));
  width: calc((var(--mouse-x2) - var(--mouse-x1)));
  height: calc((var(--mouse-y2) - var(--mouse-y1)));

  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid currentColor;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}
复制代码

在鼠标事件处理器中更新CSS变量：

document.documentElement.style.setProperty(
  '--mouse-x1',
  ctx.selectArea.x1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y1',
  ctx.selectArea.y1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-x2',
  ctx.selectArea.x2 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y2',
  ctx.selectArea.y2 + 'px',
)
复制代码

最后

若是你像我同样以为CSS变量没有用，或者压根不知道它的存在，我但愿这篇文章能够为你开启一扇门，来探索它的使用场景。

Javascript API让我踩了很多坑，可是它确实让我开了眼界，我期待将来可以更多使用和了解它们。

扩展

• 使用CSS变量
• Caniuse: CSS Variables (Custom Properties)