不能只用CSS自定义属性替代预处理器，因为二者分属运行时与编译期：--color是浏览器可读写、支持继承的动态属性；$color是Sass编译后即消失的静态占位符，无法被JS操作，也不支持原生运算或条件逻辑。
为什么不能只用 CSS 自定义属性替代预处理器
因为两者根本不是同一类东西：CSS 自定义属性是运行时可变的 --color-primary，而预处理器变量（如 $font-size-base）是编译期静态值。你没法用 var(--spacing) 去做数学运算（比如 calc(var(--spacing) * 2) 在大多数浏览器里会报错），但 calc(#{$spacing} * 2) 在 Sass 中完全合法。
常见错误现象是试图在预处理器中引用 var() 函数值，例如：
.btn {
padding: var(--spacing) * 2; /* ❌ 语法错误，CSS 不支持运算符直接作用于 var() */
}
这会导致样式解析失败，浏览器忽略整条声明。
如何让 Sass 和 CSS 自定义属性各司其职
核心原则：预处理器管「构建时逻辑」，自定义属性管「运行时状态」。比如主题色切换、用户字号偏好、暗黑模式开关这些必须在 JS 或媒体查询中动态生效的场景，交给 --theme-color；而栅格列数、断点阈值、字体缩放比例这些固定配置，仍用 $grid-columns 或 $breakpoint-md 管理。
立即学习“前端免费学习笔记（深入）”；
- 在 Sass 中定义基础设计令牌，并导出为 CSS 自定义属性
- 用
@each循环批量注入，避免手写重复 - 把预处理器变量作为默认值传给
var()回退参数，形成双保险
示例（Sass）：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
$colors: (
primary: #007bff,
success: #28a745,
warning: #ffc107
);
<p>:root {
@each $name, $value in $colors {
--color-#{$name}: #{$value};
}
--font-size-base: #{$font-size-base};
}</p><p>.button {
color: var(--color-primary, #007bff); /<em> 回退到 Sass 变量值 </em>/
font-size: var(--font-size-base, 1rem);
}
媒体查询中的变量响应式陷阱
预处理器无法响应视口变化，但 CSS 自定义属性可以——前提是它们被定义在匹配的媒体查询块内。很多人误以为只要在 :root 里定义一次就够了，结果在小屏下 --spacing-unit 还是 16px，UI 拥挤得没法用。
正确做法是把媒体查询和自定义属性绑定：
:root {
--spacing-unit: 8px;
}
<p>@media (min-width: 768px) {
:root {
--spacing-unit: 16px;
}
}</p><p>@media (min-width: 1200px) {
:root {
--spacing-unit: 24px;
}
}
注意：:root 在媒体查询中不是伪类选择器失效，而是它依然代表根元素，只是该规则只在匹配时生效。不要写成 @media { html { --x: y } }，语义不清且部分旧版 Safari 有兼容问题。
JS 动态更新时最容易漏掉的继承链断裂
当你用 document.documentElement.style.setProperty('--theme', 'dark') 切换主题，看起来没问题——但子元素如果自己覆盖了 --theme，或者父级没定义它，JS 更新就无效。这不是 bug，是 CSS 继承机制的自然表现。
关键检查点：
- 确认目标元素或其任意祖先是否已声明同名自定义属性（哪怕值为空）
- 避免在组件内部用
.card { --color: red }覆盖全局，除非你明确要隔离作用域 - 调试时用浏览器开发者工具的「Computed」面板，展开
custom properties查看当前计算值来源
真正复杂的点在于：预处理器生成的 CSS 和运行时注入的自定义属性之间没有自动同步机制。你改了 $primary，不会自动触发 --primary-color 更新——必须重新编译并刷新页面。这点在 CI/CD 流程中容易被忽略。
