CSS 变量

CSS 变量（也叫自定义属性）是一种可以重复使用的值定义方式，语法简单灵活，常用于主题切换、样式统一等场景。

1. 语法说明

定义变量

CSS 变量以 -- 开头，定义在选择器中（通常是 :root）：

:root {
  --primary-color: #4caf50;
  --padding-size: 16px;
}

使用变量

通过 var() 函数调用变量：

button {
  background-color: var(--primary-color);
  padding: var(--padding-size);
}

2. 局部作用域

变量的作用范围受限于其定义的选择器作用域：

.card {
  --card-color: #fff;
  background-color: var(--card-color);
}

3. 设置默认值

可以为变量指定默认值：

color: var(--link-color, #0000ee);

CSS 变量示例

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。