如何从JavaScript中访问SCSS的Mixin元素？

你这里的核心优势是SCSS mixin里使用了CSS自定义属性（变量），不需要遍历所有使用该mixin的元素，直接修改全局CSS变量的值，就能自动同步到所有引用它的元素上，这是最高效的实现方式。

编译后的CSS结构 #

你的SCSS编译后会生成如下CSS代码：

body {
  background-color: var(--bs-gray-dark);
  color: white;
}
.row {
  background-color: var(--bs-gray-dark);
  color: white;
}

JavaScript 修改全局CSS变量的代码 #

直接在JS中修改:root伪类上的全局CSS变量（默认--bs-gray-dark是Bootstrap全局定义在:root下的）：

// 获取根元素
const root = document.documentElement;

// 修改背景色变量
root.style.setProperty('--bs-gray-dark', '#your-new-color-value');

// 如果后续需要统一修改文字颜色，建议先把mixin里的color也改成变量
// 比如SCSS里修改mixin：color: var(--def-text-color);
// 然后用同样方式修改：
// root.style.setProperty('--def-text-color', '#000');

优化建议：统一管理变量 #

为了更方便后续维护，推荐把mixin里用到的样式值都全局定义为CSS变量，避免硬编码：

:root {
  --bs-gray-dark: #212529; // Bootstrap默认值
  --def-text-color: white;
}

@mixin def {
  background-color: var(--bs-gray-dark);
  color: var(--def-text-color);
}

这样后续用JS修改全局变量时，所有使用该mixin的元素都会自动应用新样式，完全不需要手动遍历body、.row或其他可能用到该mixin的元素。

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