SCSS编译器不处理CSS自定义属性（如--color），仅透传原样输出；Sass变量需用$开头，CSS变量引用须用#{}插值；注释中的CSS变量不生效；JS动态修改需确保变量在最终CSS规则中且作用域正确。
SCSS编译器根本不会动 --color 这类 CSS 自定义属性
只要写法正确，--primary-color: #0d6efd; 这种声明在 Sass 编译后会原样保留在输出 CSS 中——它不是 Sass 变量，编译器不解析、不替换、不删除。Sass 只处理以 $ 开头的变量、@ 指令、嵌套等自身语法；遇到不认识的 --xxx，直接透传。
常见错误现象是：你写了 --main: $primary; 却发现最终 CSS 里变成了 --main: $primary;（字面量），或者干脆报错。这不是编译器删了它，而是 Sass 根本没识别出这是个变量引用——必须用插值 #{} 才行。
- ✅ 正确写法：
--primary-color: #0d6efd;或--primary-color: #{$primary}; - ❌ 错误写法：
--primary-color: $primary;（无插值 → 原样输出或报错） - ⚠️ 注意：插值只在声明值的位置生效，不能用于选择器或属性名，比如
.#{$class} { ... }可以，但--#{$name}: red;在旧版 Sass 里可能不支持，Dart Sass 1.70+ 支持，但需确认项目版本
sass --style compressed 也不会删掉 /* */ 里的 CSS 变量注释
如果你把 CSS 变量定义写在标准多行注释里，比如：
/* --theme-color: #2563eb; --spacing-xs: 4px; */
那它会在所有编译模式（expanded / compressed）下完整保留——因为 /* */ 是原生 CSS 注释，Sass 不处理其内容。但注意：这不会让变量生效，只是“存着”，浏览器完全忽略注释里的 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
真正起作用的变量声明必须在规则块内：
:root {
--theme-color: #2563eb;
--spacing-xs: 4px;
}- ✅
/* */内的变量定义 → 仅作文档，不生效 - ✅ 规则块内的
--xxx声明 → 编译后保留，浏览器可读 - ❌
//注释里的变量 → 编译时被彻底删除，连文档都留不下
想让 JS 动态改 CSS 变量？确保它没被 Sass 的 @if 或 @for 错误包裹
CSS 自定义属性要能被 JS 读写，前提是它最终出现在浏览器解析的 CSS 规则中，且未被 Sass 的条件逻辑意外屏蔽。
例如这段代码看似合理，实则危险：
@if $dark-mode == true {
:root {
--bg: #1e293b;
}
}
@else {
:root {
--bg: #f1f5f9;
}
}问题在于：如果 $dark-mode 是一个 Sass 变量（非 JS 控制），那最终只会输出其中一组 --bg，JS 无法在运行时切换。你真正需要的是两组都存在、靠 class 切换作用域：
- ✅ 推荐写法：
.dark-theme { --bg: #1e293b; }+.light-theme { --bg: #f1f5f9; } - ❌ 避免纯 Sass 条件生成单组变量 → 失去运行时灵活性
- ⚠️ 如果用
@each生成主题色映射，确保 key 名与 JS 侧约定一致，比如--color-primary而不是primary-color（后者 JS 无法通过setProperty设置）
Dart Sass 1.70+ 支持 --#{$name} 动态属性名，但别在老项目里乱用
新版 Dart Sass 允许在属性名位置使用插值，比如：
@each $key, $value in $theme-map {
:root {
--#{$key}: $value;
}
}这能批量注入变量，但有硬性前提：
- 必须用 Dart Sass ≥ 1.70（
sass --version查看）；LibSass 已停止维护，不支持 -
$theme-map必须是 Sass map 类型，不能是 JS 对象或 JSON 导入（Sass 无法在编译期读取外部 JSON） - 生成的属性名必须符合 CSS 自定义属性命名规范（只能含字母、数字、短横线、下划线，且必须以
--开头）
实际项目中，更稳妥的做法仍是手动写几条核心变量，或用构建脚本预生成 :root 块——毕竟 CSS 变量数量通常有限，动态生成反而增加调试成本。
最易被忽略的一点：CSS 变量的继承和作用域规则，和 Sass 变量毫无关系。你在 .card 里写的 --card-padding: 1rem;，子元素能继承，JS 能改，但 Sass 编译器从头到尾都没“看见”它。
