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字）