Sass开发中如何实现CSS全局变量的注入与管理？-css教程-PHP中文网

不能直接在:root里写$color-primary，因为sass变量仅存在于编译阶段，输出css时已消失；必须用插值--color-primary: #{$color-primary}将值注入，否则浏览器报错invalid css。

sass开发中如何实现css全局变量的注入与管理？

为什么不能直接在 :root 里写 $color-primary

因为 Sass 变量只存在于编译阶段，输出 CSS 时就消失了。写 :root { --color-primary: $color-primary; } 会原样输出到 CSS 文件里，浏览器不认识 $color-primary 这个语法，最终声明无效，开发者工具里看到的是 --color-primary: $color-primary;，报错 Invalid CSS after "--color-primary:"。

必须用插值：写成 --color-primary: #{ $color-primary };，Sass 才会在编译时把变量值（比如 #007bff）代入进去。

常见坑：

#{} 插值不支持 null、map 或未定义变量——拼错名或加载顺序错会导致 Invalid null value for `#{}`
#{} 安全类型只有颜色、数字、字符串；别对 $spacing-map 直接插值
导出前建议加 @debug $color-primary; 验证值存在且非空

如何用 _config.scss 统一管理并支持项目覆盖

所有全局值（颜色、间距、断点）集中写在 _config.scss，每个变量带 !default：

@use "sass:color";
<p>$color-primary: #007bff !default;
$spacing-md: 1rem !default;
$breakpoint-lg: 1024px !default;</p>

入口文件（如 main.scss）中用 @use "config" with () 覆盖：

@use "@/styles/config" with (
  $color-primary: #ef4444,
  $spacing-md: 1.25rem
);

其他文件一律用 @use "@/styles/config"，不要重复 with——否则覆盖失效。

注意点：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

Sass 1.23+ 才支持 with，旧版本报错 Invalid CSS after "with": expected "{", was "("
with 只接受字面量或已定义变量，不能传表达式，比如 calc(#{$spacing-xs} * 2) 不合法
文件名必须是 _config.scss（下划线前缀），路径要对，@use "@/styles/_config" 会失败

怎样让 Sass 变量变成可运行时切换的 CSS 变量

纯 Sass 编译期变量做不到运行时换肤，真正可行的是：Sass 负责生成多套 CSS 变量映射，JS 负责动态设置 :root 上的值。

实操步骤：

在 src/styles/theme.scss 中定义主题 map：$theme-light: ("primary": #fff, "bg": #000);
用 @each 循环输出：@each $key, $val in $theme-light { --color-#{$key}: #{$val}; }
Vite 配置中通过 css.preprocessorOptions.scss.additionalData 注入：@use "@/styles/theme.scss";
换肤时 JS 执行：document.documentElement.style.setProperty('--color-primary', '#3b82f6');

关键约束：

additionalData 只对 .scss 后缀生效；用了 .sass（缩进语法）却配 css.preprocessorOptions.sass，大概率不生效
别在 additionalData 里写 @import，会触发重复导入警告，甚至变量覆盖
导出的 CSS 变量应严格限于真正需要 JS 动态读取的项（如主题色、字体大小），别全量导出