CSS变量不能替代Sass/Less，因其仅运行时生效、不支持计算/条件/循环；仅适用于主题切换、组件定制和新版浏览器的响应式断点；fallback有局限，性能与命名管理亦存挑战。
为什么CSS变量不能直接替代Sass/Less的$variable
CSS变量（:root中的--color-primary）是运行时生效的动态值，而Sass的$color-primary在编译期就被替换成具体值（如#007bff）。这意味着：Sass变量能参与计算（$size * 2）、条件判断（@if）、循环生成类名；CSS变量做不到——浏览器不解析calc(var(--size) * 2)这种写法，calc()只接受数值型参数，var(--size)若为16px可参与计算，但若为large就直接失效。
哪些场景下CSS变量真能“去预处理器化”
适合用原生CSS变量替代预处理器变量的，本质是“主题切换”和“局部样式微调”两类：
- 深色/浅色模式切换：用
prefers-color-scheme配合:root和.dark :root批量覆盖--bg、--text等 - 组件级定制：比如
Button组件通过style="--btn-bg: #007bff"内联传参，内部用background: var(--btn-bg) - 响应式断点复用：把
--sm: 576px定义在:root，媒体查询里写@media (min-width: var(--sm))（注意：仅Chrome 119+、Firefox 120+支持，旧版必须回退到576px）
var(--x, fallback)的fallback不是万能兜底
很多人以为var(--color, red)能像Sass默认值一样“没定义就用red”，但实际fallback只在--color**完全未声明**或**声明为invalid value**（如--color: 123）时生效。一旦声明了--color: initial或--color: unset，fallback就不会触发——浏览器认为这是有效值。
更隐蔽的坑是继承链干扰：如果父元素设了--color: blue，子元素没重定义，var(--color, red)会取blue而非red。要真正“降级”，得用color: var(--color, red)配合color: inherit重置策略，或干脆在根上统一初始化所有变量：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
:root {
--color-text: #333;
--color-bg: #fff;
--space-unit: 8px;
}性能与维护成本的真实权衡
去掉预处理器后，CSS体积可能不降反升——因为CSS变量无法压缩（Terser不处理var(--x)），且每个var()调用都是运行时查找。Chrome DevTools的“Rendering”面板里开启“Paint flashing”，频繁变更CSS变量会触发重绘；而Sass编译后的静态值毫无此问题。
真正该砍掉预处理器的信号是：项目里90%的$变量只用于颜色和间距，且没有嵌套、循环、函数逻辑。这时候把$spacing-sm换成--spacing-sm，再配个简单的JS切换器，比维护一套Sass构建流程更轻量。但一旦涉及@function rem-calc($px)或@mixin flex-center，原生CSS变量就只是补丁，不是替代方案。
变量名管理容易被忽略：Sass用$btn-padding-y，CSS变量得写成--btn-padding-y，但没人阻止你写--buttonPaddingY或--ButtonPaddingY，团队协作时命名混乱比语法限制更伤人。
