React+Bootstrap5.3：如何通过CSS选择器条件覆盖SASS变量？

你的核心问题在于对Sass变量的编译机制理解有误：Sass变量是编译时生效的，不是运行时的动态变量。你在h3.red这类选择器内部重新定义$headings-color时，Bootstrap的核心样式已经在后续的@import "bootstrap/scss/bootstrap"中完成编译，局部变量无法回溯修改已经生成的CSS代码，所以这些定义不会生效。

下面是两种符合你需求的实现方式：

方法1：复用Bootstrap的标题混合宏（Mixin） #

Bootstrap的标题样式是通过heading()这个mixin生成的，我们可以在特定选择器内部重新定义变量，再调用这个mixin生成对应样式，这样就能基于局部变量复用Bootstrap的标题逻辑：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// 全局默认标题颜色
$headings-color: blue;
$body-color: green;

// 为h3.red重新生成标题样式，使用局部变量
h3.red {
  $headings-color: red;
  @include heading();
}

// 为h3.blue重新生成标题样式（如果需要和全局区分）
h3.blue {
  $headings-color: blue;
  @include heading();
}

@import "bootstrap/scss/bootstrap";

这种方式的优势是：不仅会修改颜色，还会基于局部变量同步应用Bootstrap标题的其他样式（如字体大小、字重、行高），保持样式一致性。

方法2：直接用变量覆盖CSS属性 #

如果只需要修改特定属性（比如仅颜色），可以直接在选择器内用变量赋值，虽然是手动指定属性，但依然利用了Sass变量的灵活性：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// 全局默认值
$headings-color: blue;
$body-color: green;

// 定义局部变量
$h3-red-color: red;
$h3-blue-color: blue;

// 用变量覆盖对应选择器的属性
h3.red {
  color: $h3-red-color;
}

h3.blue {
  color: $h3-blue-color;
}

@import "bootstrap/scss/bootstrap";

关键原理总结 #

• Sass变量的作用域是编译时的，局部变量只在当前代码块（选择器、mixin等）编译时生效。
• 要让变量影响Bootstrap的样式，必须在Bootstrap编译之前或者在重新调用其mixin时传入局部变量。

内容的提问来源于stack exchange，提问作者mrjayviper