CSS variable

简介

var() CSS函数可用于插入自定义属性的值（有时称为“ CSS variable”）。可在运行时动态更改变量值，可用于动态应用主题等场景。

语法

var( <custom-property-name> , <declaration-value>? )

custom-property-name：必需。自定义的属性名称（必须以 “--” 符号开头）
declaration-value：可选。备用值（当自定义属性无效时使用。可以理解为变量的 default 值，当变变量未定义时生效）

示例

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

/* Fallback */
/* In the component’s style: */
.component .header {
  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
}
.component .text {
  color: var(--text-color, black);
}
/* In the larger application’s style: */
.component {
  --text-color: #080;
}

CSS变量和预处理变量有什么不同？

预处理变量

缺点

• 不能直接被浏览器识别，需要经过编译转成 CSS

$brandColor: #F06D06;
.main-header {
  color: $brandColor;
}
.main-footer {
  background-color: $brandColor;
}

• 变量是静态的，无法在运行时改变

CSS变量

优势

• 使用 CSS variable 不需要预处理器，节省编译成本
• 当 CSS variable 值改变时，浏览器会在需要的时候重绘
• 可以访问并且用 JavaScript 操纵它们
• 变量是动态的，可以在运行时更改变量

使用 JS 操纵 CSS 变量的示例

浏览器兼容性