CSS变量怎么用？自定义属性var()复用样式与主题切换实战

做前端写网页，最烦的一件事：公司主色一改，要把十几个按钮、标题、边框的颜色全换一遍，漏一个就丑一块。CSS变量（官方叫自定义属性）就是专门治这个毛病的。老陈今天带新手搞懂CSS变量怎么用，并实战做一个一键换主题。

一、什么是CSS变量

简单说，CSS变量就是给某个值起个名字存起来，后面哪里要用就写这个名字。它定义在 :root（代表整个文档根）里，全站都能用。好处是改一处，全站生效，不用满文件找替换。

二、怎么定义和调用

定义用两根减号开头，调用用 var() 包起来。看这段最小例子：

:root { --main-color: #e63946; --radius: 8px; }

.btn { background: var(--main-color); border-radius: var(--radius); }

只要在 :root 里把 --main-color 改成蓝色，所有用了它的按钮立刻变色，不用挨个改。

三、实战：一键切换主题色

把主色、背景、文字色都定义成变量，切换主题就变成改几个变量的值。常见做法是给 body 加不同的类名：

.theme-dark { --bg: #1a1a1a; --text: #f5f5f5; }

.theme-light { --bg: #ffffff; --text: #333333; }

body { background: var(--bg); color: var(--text); }

切换时给 body 换类名，整页配色跟着变，这就是很多网站深色模式的原理。

四、进阶：用JS动态改主题

变量还能被JavaScript实时改，比如做一个换肤按钮：

document.documentElement.style.setProperty('--main-color', '#2a9d8f');

这一行就能在用户点击时把主色换掉，配合本地存储还能记住用户的选择，刷新不丢。

五、新手避坑三点

• 变量有作用域：写在 :root 是全局，写在某个选择器里只在该范围内生效
• 记不住值时给默认值：var(--x, #fff)，变量不存在就 fallback 到白色
• 变量名区分大小写，--Color 和 --color 是两个不同的变量

老陈总结

CSS变量就是用 :root 定义、var() 调用，核心价值是复用和集中管理样式。新手现在就可以打开自己的网页，把反复出现的颜色、间距抽成变量试一试，改起需求来会轻松很多。想系统学前端，可以看老陈的HTML、CSS、JS入门系列，或评论区留言拿资料。