# CSS 变量

URL: https://caijiao.org/css/11-advanced/01-variables
Source: docs/css/11-advanced/01-variables.md
Description: CSS 变量是一种自定义属性的机制，可重复使用统一的样式值，提升代码可维护性与灵活性。

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

## 1. 语法说明

### 定义变量

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

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

### 使用变量

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

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

## 2. 局部作用域

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

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

## 3. 设置默认值

可以为变量指定默认值：

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

## CSS 变量示例

[在线代码演示](/css/demos/31.html)