如何根据body类名修改SCSS的$primary-color变量值适配特殊页面

核心问题说明 #

你预想的按SCSS变量按类切换的写法无法生效，因为SCSS是预编译语言，$开头的变量在打包编译阶段就会被替换为具体的色值，不会保留到浏览器运行阶段，因此无法根据页面运行时的body类动态切换值。

最优解决方案（适配大体积CSS项目，改动极小） #

推荐使用CSS原生变量结合SCSS变量的方案，几乎不用修改原有业务代码就能实现需求：

1. 调整全局变量定义，把SCSS变量和CSS原生变量绑定

// 全局默认主色定义
:root {
  --primary-color: red;
}
// SCSS变量直接绑定CSS变量，原有代码无需修改
$primary-color: var(--primary-color);
$body-color: $primary-color;

2. 给特殊页面的body类加变量覆盖规则

// 只要body上加了special类，全局主色自动切换为绿色
body.special {
  --primary-color: green;
}

3. 调整原有代码的笔误即可正常使用

.standard {
  /* 原来的--var是笔误，改为var即可 */
  color: var(--body-color, $body-color);
}

方案优势

• 改动量极小：仅需要修改变量定义和新增1条特殊类的变量覆盖规则，原有上万行CSS都不用调整
• 切换逻辑简单：只需要给特殊页面的body标签加special类，所有用到主色的元素会自动同步变色
• 性能优异：原生CSS变量是浏览器原生支持的特性，运行时切换没有额外性能开销

兼容IE的备选方案（非必要不推荐） #

如果必须兼容不支持CSS变量的IE浏览器，可以用SCSS混合宏实现：

// 定义主题混合宏
@mixin with-theme {
  body.standard & {
    $primary-color: red;
    @content;
  }
  body.special & {
    $primary-color: green;
    @content;
  }
}

// 原有用到主色的样式外层包裹这个混合宏即可
.standard {
  @include with-theme {
    color: $primary-color;
  }
}

该方案缺点是需要修改所有用到主色的选择器，大项目改动成本较高，编译后CSS体积也会翻倍。

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