SCSS中如何基于父级主题类实现元素的最优样式方案？

当前问题分析 #

旧项目中主题类（.theme-light/.theme-dark）挂载在<body>或根元素上，当前实现存在两个核心问题：

• 样式选择器嵌套过深（如.theme-light .elem1 .elem2），层级冗余且维护不便
• 需重复编写两套主题的元素样式，或被迫使用!important来强制覆盖样式，违背CSS优先级规范

解决方案 #

方案1：使用CSS自定义属性（变量）「推荐原生方案」 #

通过在主题类中定义全局变量，元素直接引用变量值，彻底避免嵌套与重复代码：

/* 根元素主题变量定义 */
.theme-light {
  --text-primary: black;
  --bg-primary: #ffffff;
  /* 可扩展更多主题变量 */
}

.theme-dark {
  --text-primary: white;
  --bg-primary: #2d2d2d;
}

/* 元素样式直接引用变量 */
.elem2 {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  /* 其他通用样式 */
}

这种方式无需预处理器，现代浏览器原生支持，主题类的作用域会自动覆盖子元素，完全不需要嵌套选择器或!important。

方案2：使用Sass的@at-root实现反向选择器「预处理器方案」 #

如果项目使用Sass预处理器，可通过@at-root配合父选择器&实现你想要的“以元素为中心”的写法，编译后生成正确的父级主题选择器：

.elem2 {
  /* 通用样式写在这里 */
  
  @at-root .theme-light & {
    color: black;
  }

  @at-root .theme-dark & {
    color: white;
  }
}

编译后的CSS输出为：

.elem2 { /* 通用样式 */ }
.theme-light .elem2 { color: black; }
.theme-dark .elem2 { color: white; }

这种写法既保持了元素样式的集中性，又避免了深层嵌套，同时无需重复编写元素选择器。

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