SCSS变量（如$primary-color）仅在编译期存在，会被静态替换为固定值，无法生成运行时可变的CSS自定义属性；必须用:root{--bs-primary:#{$primary-color}}插值语法导出真实CSS变量，才能被JS或媒体查询动态控制。
为什么直接在 SCSS 里用 $variable 无法生成运行时可变的 CSS 变量
SCSS 编译期变量（如 $primary-color: #0d6efd）会被静态替换为固定值，最终 CSS 里根本不会出现 --bs-primary 这类自定义属性。首屏需要动态主题或暗色模式切换时，这种写法等于把变量“焊死”在编译结果里，后续 JS 或媒体查询完全无法干预。
必须用 :root + #{} 插值语法生成真实 CSS 变量
SCSS 支持在 :root 块中用插值 #{} 输出运行时可读取的 CSS 自定义属性，这是 Bootstrap 5+ 默认方案的底层逻辑。关键点是：变量名必须字符串化，值需手动转义或确保类型安全。
-
:root { --bs-primary: #{$primary-color}; }—— 直接输出，但$primary-color若为 map 或函数调用会报错 - 更稳妥写法：
:root { --bs-primary: #{inspect($primary-color)}; }，inspect()能安全转义颜色、数字等原语 - 若需响应式变量（如不同断点下
--gap不同），得配合@each和map-get()遍历$spacers等 map，不能只靠单个$variable
注入顺序错乱会导致 CSS 变量被覆盖或未定义
Bootstrap 的 variables.scss 本身不直接输出 :root，而是定义 SCSS 变量供 mixins 使用。你手动注入的 :root 块如果放在 @import "bootstrap/scss/mixins" 之后，就可能被后续模块里的同类定义覆盖；若放太前，则 $grid-breakpoints 等依赖尚未声明。
- 正确位置：在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/mixins"之前 - 避免重复：检查最终 CSS 是否存在多个
:root { --bs-xxx: ... }，重复声明以最后出现的为准，容易误覆盖 - 浏览器兼容性：CSS 变量在 IE 中完全不可用，若需支持 IE，必须搭配 fallback 值，例如
color: $primary-color; color: var(--bs-primary);
别把全部变量都塞进 :root，按需注入才是关键
Bootstrap 的 $theme-colors map 有 10+ 个颜色，全注入 --bs-blue、--bs-indigo… 会增加 2KB+ 无意义体积。首屏性能优化的核心是“只暴露 JS 或媒体查询真会读取的变量”。
立即学习“前端免费学习笔记（深入）”；
- 典型只需注入：
--bs-primary、--bs-body-color、--bs-gray-700（用于文字）、--bs-border-color（用于表单边框） - 禁用
--bs-font-sans-serif这类字体栈变量——除非你在 JS 里动态切换字体族，否则纯属冗余 - 验证方法：打开 DevTools → Elements → 选中
html元素 → Styles 面板搜索var(--bs-，确认数量合理且无拼写错误
