CSS 变量

CSS 变量是什么, 如何定义？

• CSS 变量: 自定义属性, 以 -- 开头;
• 定义: 写在任意选择器的声明块内, 常放在 :root;
• 继承: 作为自定义属性, 沿 DOM 树向下继承;

:root {
  --main-font: Helvetica, Arial, sans-serif;
}

如何使用 CSS 变量？

• 读取: 用 var() 函数引用变量;
• 生效时机: 解析时替换为变量的值;

p {
  font-family: var(--main-font);
}

备用值如何书写？

• 语法: var(--name, fallback);
• 机制: 第一个参数无效时使用第二个参数;

p {
  font-family: var(--main-font, sans-serif);
  color: var(--secondary-color, blue);
}