CSS 变量的本质
CSS 自定义属性（Custom Properties）俗称 CSS 变量，语法很简单：
:root{--color-primary:#3b82f6;}.button{background:var(--color-primary);}但和 Sass/Less 变量不同，CSS 变量是运行时的。这意味着：
// JavaScript 可以动态修改document.documentElement.style.setProperty('--color-primary','#ef4444')// 立即生效，所有用到的地方都会更新这个特性让暗黑模式、主题切换变得异常简单。
作用域与继承
CSS 变量遵循 CSS 的继承规则，可以定义在不同层级：
:root{--spacing:1rem;/* 全局 */}.card{--spacing:0.5rem;/* 卡片内覆盖 */padding:var(--spacing);}.card .item{margin:var(--spacing);/* 继承 card 的 0.5rem */}利用这个特性，可以实现"局部主题"：
:root{--text-color:#1f2937;}.dark-theme{--text-color:#f9fafb;}/* 某个区域强制暗黑模式 */.sidebar{--text-color:#f9fafb;}命名规范踩过的坑
早期命名随心所欲，--blue、--mainColor都用过。后来维护起来很痛苦——--blue改成红色后，名字和值对不上，看着就别扭。
现在遵循的规范：
:root{/* 语义化命名：用途而非外观 */--color-primary:#3b82f6;--color-danger:#ef4444;--color-text:#1f2937;--color-text-muted:#6b7280;/* 分层命名：模块-属性-变体 */--button-bg:var(--color-primary);--button-bg-hover:#2563eb;--button-radius:0.5rem;/* 间距系统：倍数关系 */--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:2rem;}命名即文档，看到--color-danger就知道是警告色，不用查值。
默认值与回退
var()支持默认值：
.button{/* 如果 --btn-bg 未定义，使用 #3b82f6 */background:var(--btn-bg,#3b82f6);}更实用的场景是渐进增强：
.card{/* 旧浏览器：fallback */background:white;/* 新浏览器：变量 */background:var(--card-bg,white);}还可以链式回退：
.element{color:var(--theme-color,var(--brand-color,#333));}暗黑模式实战
CSS 变量让暗黑模式变得优雅：
:root{--bg:#ffffff;--text:#1f2937;--border:#e5e7eb;}@media(prefers-color-scheme:dark){:root{--bg:#1f2937;--text:#f9fafb;--border:#374151;}}/* 或者 JS 控制 */[data-theme="dark"]{--bg:#1f2937;--text:#f9fafb;}组件代码完全不用改：
.card{background:var(--bg);color:var(--text);border:1px solidvar(--border);}性能考量
CSS 变量有性能开销，但通常可以忽略。真正需要注意的是：
1. 避免在关键路径上大量使用
/* 不推荐：每个属性都用变量 */.element{margin:var(--m);padding:var(--p);border:var(--b);background:var(--bg);color:var(--c);}/* 推荐：只在需要动态变化的地方用 */.element{margin:1rem;padding:0.5rem;border:1px solidvar(--border-color);background:var(--bg-color);}2. 计算在定义时完成
/* 不推荐：每次使用都计算 */:root{--base:1rem;}.element{padding:calc(var(--base)* 2);}/* 推荐：预计算 */:root{--base:1rem;--double:2rem;}.element{padding:var(--double);}工具实现思路
基于以上实践，做了一个 CSS 变量生成器：
核心功能：
interfaceCssVariable{name:string// 变量名，如 --color-primaryvalue:string// 值，如 #3b82f6category:string// 分类，如 colors、spacing}// 生成分组输出functiongenerateCss(variables:CssVariable[],selector:string):string{constgrouped:Record<string,CssVariable[]>={}variables.forEach(v=>{if(!grouped[v.category])grouped[v.category]=[]grouped[v.category].push(v)})letcss=`${selector}{\n`Object.entries(grouped).forEach(([cat,vars])=>{css+=`\n /*${cat}*/\n`vars.forEach(v=>{css+=`${v.name}:${v.value};\n`})})css+='}\n'returncss}几个细节：
- 颜色值识别：检测
#hex、rgb()、hsl()格式，显示颜色预览 - 分类管理：按 colors、spacing、typography 等分组输出
- 选择器自定义：支持
:root、.dark、[data-theme="dark"]等
从预处理器迁移
如果项目从 Sass/Less 迁移，有个技巧：
// 保留 Sass 变量用于计算 $base-spacing: 8px; // 同时输出 CSS 变量用于运行时 :root { --spacing: #{$base-spacing}; --spacing-lg: #{$base-spacing * 2}; }这样既保留了 Sass 的计算能力，又获得了 CSS 变量的动态性。
CSS 变量不是银弹，但在设计系统、主题切换、组件库开发这些场景，确实比硬编码和预处理器变量更灵活。关键是建立命名规范，别让变量变成另一种维护负担。
相关工具：CSS 渐变生成器 | 颜色对比度检查
