CSS自定义属性在Sass编译时会被移除吗_设置保留原生变量的编译选项-css教程-PHP中文网

scss编译器不处理css自定义属性（如--color），仅透传原样输出；sass变量需用$开头，css变量引用须用#{}插值；注释中的css变量不生效；js动态修改需确保变量在最终css规则中且作用域正确。

css自定义属性在sass编译时会被移除吗_设置保留原生变量的编译选项

只要写法正确，--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+ 支持，但需确认项目版本

如果你把 CSS 变量定义写在标准多行注释里，比如：

/* 
--theme-color: #2563eb;
--spacing-xs: 4px;
*/

那它会在所有编译模式（expanded / compressed）下完整保留——因为 /* */ 是原生 CSS 注释，Sass 不处理其内容。但注意：这不会让变量生效，只是“存着”，浏览器完全忽略注释里的 CSS 规则。

真正起作用的变量声明必须在规则块内：

:root {
  --theme-color: #2563eb;
  --spacing-xs: 4px;
}

CSS 自定义属性要能被 JS 读写，前提是它最终出现在浏览器解析的 CSS 规则中，且未被 Sass 的条件逻辑意外屏蔽。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

例如这段代码看似合理，实则危险：

@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 允许在属性名位置使用插值，比如：

@each $key, $value in $theme-map {
  :root {
    --#{$key}: $value;
  }
}

这能批量注入变量，但有硬性前提：

实际项目中，更稳妥的做法仍是手动写几条核心变量，或用构建脚本预生成 :root 块——毕竟 CSS 变量数量通常有限，动态生成反而增加调试成本。

最易被忽略的一点：CSS 变量的继承和作用域规则，和 Sass 变量毫无关系。你在 .card 里写的 --card-padding: 1rem;，子元素能继承，JS 能改，但 Sass 编译器从头到尾都没“看见”它。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！

CSS自定义属性在Sass编译时会被移除吗_设置保留原生变量的编译选项