SCSS如何根据body ID标识的主题条件引入对应样式文件

问题解答 #

你写的这种SCSS引入方式是完全可行的，这也是多主题切换场景下非常常用的样式组织方案。

运行逻辑

SCSS的@import是编译阶段执行的规则，会直接把引入的外部文件内容插入到@import所在的位置。你把引入语句写在#theme1、#theme2的选择器块内部后，编译时两个主题文件里的所有样式都会自动加上对应的父选择器前缀，刚好匹配body标签带对应ID的场景，两套主题样式天然隔离不会冲突。

举个实际编译例子，假设theme-one-styling.scss内的代码为：

.card {
  background: #ffffff;
  color: #222222;
  border-radius: 4px;
}

经过你的写法编译后，最终生成的CSS代码会是：

#theme1 .card {
  background: #ffffff;
  color: #222222;
  border-radius: 4px;
}

完全符合你根据body ID匹配主题样式的需求。

注意事项

• 不要在主题文件内写顶层的body、html选择器，否则编译后会变成#theme1 body这种结构，无法匹配到你加在body上的ID。如果需要给body加主题专属样式，可以在主题文件内用&指代父选择器，比如写& { background: #f5f5f5; }，编译后会直接生成#theme1 { background: #f5f5f5; }
• 主题文件内定义的SCSS变量、mixin仅在当前主题的选择器块内生效，刚好可以实现主题变量的隔离；如果需要使用全局通用的变量、mixin，提前在全局层面引入即可
• 这种方案会把两套主题的样式都打包进同一份CSS文件，如果你后续扩展到更多主题需要优化打包体积，可以切换为构建阶段拆分主题CSS、运行时动态加载的方案，仅两套主题的话当前方案足够简单高效，不需要额外改造。

内容的提问来源于stack exchange，提问作者Mr.K