修改CSS变量不触发全量重编译：改--primary-color仅更新CSSOM，跳过JS重执行、HTML重解析和模块热替换；而改Sass变量$primary-color会强制重编译所有引用文件，Vite常降级为整页刷新，调试中断。
修改CSS变量不触发全量重编译
在 Vite 等现代构建工具中，改一个 --primary-color 只需更新 CSSOM，浏览器跳过 JS 重执行、HTML 重解析、模块热替换等环节；而改 Sass 的 $primary-color 会强制重新编译所有引用它的 .scss 文件，哪怕只动了一个字符。Vite 的 HMR 对预处理器入口文件（如 variables.scss）通常降级为整页刷新，调试节奏直接被打断。
运行时计算比编译期计算更省体积
预处理器把 $size * 2 编译成固定值 32px，虽利于压缩，但失去响应能力；CSS 变量配合 calc()（如 width: calc(var(--base-width) / var(--col));）保留原始语义，gzip 后字符串重复率高可能略增体积，但换来的是：断点变化、列数调整、缩放操作时无需重新请求样式表。真正拖慢首屏的是构建链路延迟——Sass 编译卡在 dev server 启动或保存瞬间，而 CSS 变量改完保存即生效。
主题切换不依赖样式注入或 DOM 操作
用 JavaScript 切换暗色模式时：
– 预处理器方案需动态加载新 CSS 文件或拼接 <style> 标签，触发 FOUC 或阻塞渲染；
– CSS 变量只需 document.documentElement.style.setProperty('--bg', '#121212')，所有 var(--bg) 引用同步更新，且可搭配 transition: background-color .2s 做平滑过渡。
注意：大量嵌套 calc(var(--a) + var(--b)) 会在滚动/动画中加重重排压力，Chrome 的 “Rendering > Paint flashing” 能直观暴露这类性能热点。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
兼容性兜底成本更低
IE 不支持 CSS 变量，但 @supports (color: var(--t)) 可精准包裹依赖块，旧浏览器直接跳过；而预处理器降级需额外配置 PostCSS 插件（如 postcss-custom-properties），它无法处理 calc(var(--a) + var(--b)) 这类组合，最终仍要手写 fallback。更关键的是：变量作用域污染比想象中隐蔽——.modal { --z-index: 1000; } 会影响其内部所有子组件的 z-index 计算，但开发者很少检查是否被父级 div { --z-index: 999; } 意外覆盖。
立即学习“前端免费学习笔记（深入）”；
