@use是当前Sass中避免样式污染最可靠的方式，它从语言层面强制隔离变量、@mixin、%placeholder和函数的作用域；继续用@import等于主动放弃封装能力，污染几乎不可避免。
直接改变量就能让整个组件响应式变色、缩放、圆角——这事能成，但前提是变量得在正确位置被声明、被消费，且不能被后续重定义覆盖。
为什么改了$btn-padding却没生效
常见错误是把变量覆盖写在 @import "bootstrap/scss/bootstrap" 之后，或者混在 HTML 组件的局部 .scss 文件里。Bootstrap 的 Sass 构建链要求：所有自定义变量必须出现在 functions 和 variables 导入之间，且早于任何组件样式生成逻辑。
- ✅ 正确顺序：
$btn-padding: 12px !default;→@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/buttons"; - ❌ 错误写法：先
@import "bootstrap/scss/bootstrap"，再写$btn-padding: 12px;—— 此时变量已编译完毕，赋值无效 - ⚠️ 注意：
!default只在变量未定义时生效；如果 Bootstrap 源码里已用$btn-padding: 0.375rem !default;声明过，你的覆盖必须在它之前，否则被跳过
$theme-colors 映射怎么安全扩展新变体
往 $theme-colors map 里加 "accent": #6f42c1 看似简单，但若组件内部用 map-get($theme-colors, "accent") 却没 fallback，编译不会报错，运行时却可能返回 null，导致背景色丢失。
- 必须配合
map-has-key($theme-colors, $variant)校验存在性，再调用map-get - 别直接写
background-color: map-get($theme-colors, $variant);，应写成：@if map-has-key($theme-colors, $variant) {<br> background-color: map-get($theme-colors, $variant);<br>} @else {<br> @warn "Unknown theme color variant: '#{$variant}'";<br> background-color: map-get($theme-colors, "primary");<br>} - 新增变体后，务必检查所有用到
theme-color的 mixin（如button-variant、badge-variant）是否已适配该 key
原子化定制时，哪些变量该用 CSS 自定义属性代替
Sass 变量适合编译期确定的视觉契约（如 $border-radius-sm: 0.25rem），但颜色、字体大小等需运行时切换的，硬编码进 Sass 会阻断主题切换能力。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐解耦方式：
--btn-bg、--card-shadow这类 CSS 自定义属性由 JS 控制，Sass mixin 只负责结构和响应式逻辑 - ❌ 避免把
$primary直接塞进background-color声明里——它无法被 :root 覆盖，也无法用prefers-color-scheme动态响应 - 混合使用场景：Sass 生成基础 class（如
.btn），CSS 自定义属性控制具体值（.btn { background-color: var(--btn-bg, #007bff); }），两者职责分明
最易被忽略的是变量作用域污染——比如在某个组件文件里写了 $grid-columns: 16;，却没意识到它会影响所有后续导入的 grid 相关模块。真正的原子化不靠堆变量，而靠 @use 隔离 + 显式 as 命名空间 + _index.scss 精确暴露，否则“可定制”很快变成“不可预测”。
