CSS 变量 - CSS

CSS 变量又称为自定义属性（Custom Properties），对于需要频繁修改的 CSS 属性，例如颜色、尺寸等，我们可以通过定义并引用 CSS 变量来方便快捷地进行修改。

定义 CSS 变量

定义 CSS 变量的语法如下：

selector {
  --variable-name: variable-value;
}

其中，selector 可以是任意 CSS 选择器（如标签选择器、类选择器、ID 选择器等），用来指定应用 CSS 变量的元素。--variable-name 是自定义的变量名，以两个连字符 -- 开头，后面紧跟着变量名。variable-value 是变量的值，可以是任何有效的 CSS 值。

例如，定义一个名为 --primary-color 的 CSS 变量表示主色调：

body {
  --primary-color: #1abc9c;
}

引用 CSS 变量

引用 CSS 变量的语法如下：

selector {
  property: var(--variable-name);
}

其中，selector 同样可以是任意 CSS 选择器，用来指定应用 CSS 变量的元素。property 是 CSS 属性名，被赋值为 var(--variable-name) 表示应用 --variable-name 所定义的变量。

例如，应用定义的 --primary-color 变量作为背景色：

div {
  background-color: var(--primary-color);
}

继承和覆盖

CSS 变量具备继承和覆盖的特性。如果一个元素没有定义某个变量，它可以从它的父元素继承这个变量的值。而如果一个元素重新定义了一个已经继承的变量，就会覆盖其父元素的样式。

例如，定义一个名为 --secondary-color 的 CSS 变量表示次色调，并将其应用到 body 元素上：

body {
  --secondary-color: #f1c40f;
}

定义 header 元素的背景色为 --primary-color，而定义 div 元素的背景色为 --secondary-color：

header {
  background-color: var(--primary-color);
}

div {
  background-color: var(--secondary-color);
}

计算 CSS 变量

在 CSS 中可以对变量进行简单的计算，例如加减乘除、求余等运算。此外，还可以使用 min()、max()、clamp() 等函数计算。

例如，定义宽度为页面宽度的一半减去 20px：

body {
  --page-width: calc(50vw - 20px);
  width: var(--page-width);
}

浏览器支持

CSS 变量目前被主流浏览器完全支持，包括 Chrome、Firefox、Safari、Edge、iOS Safari 和 Android Chrome 等。

总结

CSS 变量是一个非常实用的工具，可以通过定义并引用变量来方便快捷地对样式进行调整。同时，CSS 变量也支持继承、覆盖、计算等诸多特性，可以帮助开发者更加灵活地处理复杂的样式。