css之变量

近年来，一些新特性开始作为规范的一部分，出现在CSS语言中，已经可用，并且有非常棒的浏览器支持。比如：CSS变量(CSS variables)，或者用它的官方称谓，叫作自定义属性。

你可能已经在CSS预处理器中尝试过使用变量而带来的好处了，比如Sass和Less。预处理器让你能设置变量，以及在函数、循环、数学计算等等地方中使用它们。这是否意味着CSS变量已经无关紧要了呢？

那可未必，主要是因为，CSS变量与预处理器中的变量其实是不同的东西。

这些不同基于一个事实：CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。

这意味着，你可以在样式表中，在内联样式中，在SVG的标签中直接更新CSS变量，甚至可以在运行时用JavaScript直接修改它。而你是无法对预处理器中的变量做上面这些操作的。

变量的声明

声明变量的时候，变量名前面要加两根连词线--

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。

为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

变量的值类型

各种值都可以放入 CSS 变量：颜色值，字符串，数字等。变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --header-height: 68px;
  --base-line-height: 40;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

如果变量值是数值，不能与数值单位直接连用，必须使用calc()函数，将它们连接。

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

var() 函数

var()函数用于读取变量

body {
  --foo: #7F583F;
}
a {
  color: var(--foo);
}

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

color: var(--foo, #7F583F);

作用域

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

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。

由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

:root {
  --main-color: #06c;
}

响应式

CSS是动态的，页面的任何变化，都会导致采用的规则变化。利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

JavaScript 操作

JavaScript 操作 CSS 变量的写法如下：

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

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

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

这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

所以说 CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。