CSS变量用于运行时动态控制，预处理器变量用于编译期静态复用；二者解决的问题本质不同，必须分工明确、不可互替。
复杂项目中不建议「用 CSS 变量替代预处理器变量」，而是必须明确：二者解决的问题根本不同——CSS 变量用于运行时动态控制，$variable用于编译期静态复用。混用或互替会直接导致样式失控。
什么时候必须用 CSS 变量？
只有当样式需要在页面加载后被 JavaScript 修改、响应用户操作或设备状态变化时，CSS 变量才是唯一可行方案。
- 主题切换（如深色/浅色模式）：通过
document.documentElement.style.setProperty('--bg-color', '#1a1a1a')实时生效，无需重新构建或注入新 CSS - 组件级定制：一个
Button组件接收colorprop，直接映射为--button-color，子元素用var(--button-color)继承，避免内联 style 或重复 class - 动画性能敏感场景：CSS 变量可被 GPU 加速的属性（如
transform、opacity）引用，而预处理器变量编译后是固定值，无法驱动动画帧间变化
什么时候绝对不能用 CSS 变量？
任何需要编译期计算、条件生成或类型安全的场景，CSS 变量都会失效或引发隐性错误。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
calc(var(--size) * 2)不合法 ——var()只能返回已解析的值，不能参与运算；而$size * 2在 Sass 中直接输出32px - 媒体查询断点：
@media (min-width: var(--breakpoint-md))是语法错误；必须写死@media (min-width: 768px)，或用$breakpoint-md编译成具体数值 - 颜色函数调用：
darken(var(--primary), 10%)浏览器不认识darken()；Sass 的darken($primary, 10%)在构建时就完成转换
CSS 变量 和 $variable 共存时的关键约束
共存不是简单“都用”，而是有严格分工和注入路径要求。
立即学习“前端免费学习笔记（深入）”；
- 全局
CSS 变量必须定义在:root或特定作用域选择器下，不能依赖预处理器@use注入 —— 否则 JS 读不到 - 预处理器变量不能用于覆盖
CSS 变量的默认值：var(--color, $fallback)会报错，$fallback是 Sass 语法，浏览器无法解析 - Vite 中若用
css.preprocessorOptions.sass.additionalData注入变量，它只影响预处理器编译，对:root里的--x完全无感
真正容易被忽略的是作用域污染：一个组件里 div { --color: red; } 会污染其所有后代，但没人检查是否被父级或兄弟组件意外覆盖；而 @use "vars" as button 的 $border-radius 天然隔离。复杂项目里，变量冲突比性能问题更早击穿维护底线。
