CSS变量怎么用

# CSS变量怎么用

CSS变量（也称为自定义属性）是CSS3引入的强大功能，它允许开发者在样式表中定义可复用的值，并通过变量名在整个文档中引用。本文将介绍CSS变量的基本用法和实际应用场景。

## 一、CSS变量的定义

CSS变量以`--`开头定义，通常放在`:root`伪类中（表示文档根元素），使其成为全局变量：

```css
:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

二、变量的使用

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

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}

三、变量作用域

CSS变量遵循级联规则： - 全局变量定义在:root中 - 局部变量可定义在具体选择器内

.container {
  --local-color: #e74c3c; /* 仅在该容器内有效 */
}

四、备用值设置

当变量未定义时，可以设置备用值：

.element {
  color: var(--undefined-var, #333);
}

五、实际应用场景

1. 主题切换
   通过修改变量值实现动态换肤：

   document.documentElement.style.setProperty('--primary-color', '#e74c3c')
   

2. 响应式设计
   结合媒体查询调整变量值：

   @media (max-width: 768px) {
    :root {
      --spacing-unit: 8px;
    }
   }
   

3. 动画控制
   通过变量实现动态动画效果：

   .box {
    transform: rotate(var(--rotate, 0deg));
   }
   

六、注意事项

1. 变量名区分大小写
2. 不能作为属性名使用（如var(--size): 10px无效）
3. 建议使用语义化的命名（如--text-color而非--red）

七、浏览器支持

现代浏览器均已支持CSS变量（IE11不支持）。可通过@supports检测支持情况：

@supports (--css: variables) {
  /* 支持时的样式 */
}

通过合理使用CSS变量，可以显著提高样式代码的可维护性和灵活性，是现代化CSS开发的必备技能。 “`

（全文约560字）