如何优化多主题切换SCSS代码 降低暗色主题下的CSS编译冗余

本次优化完全不改动原有暗色样式的具体逻辑，仅调整SCSS的编译组织方式，直接消除重复生成的规则块：

优化核心思路 #

利用SCSS选择器占位符的特性，把所有暗色样式只定义一次，再分别挂载到不同的触发条件下，避免重复生成属性规则，同时完全保留原有功能逻辑。

具体实现步骤 #

• 把原@mixin dark内的所有样式代码原封不动迁移到全局作用域的占位符%dark-base中，不需要修改任何样式内容。
• 移除原有两个prefers-color-scheme媒体查询块内的@include dark调用，改为使用@extend %dark-base分别挂载触发条件：
  • 强制暗色场景：直接在全局选择器[data-color-mode="dark"]中extend占位符，无需嵌套在媒体查询内，覆盖所有系统场景。
  • 自动跟随系统暗色场景：仅在@media (prefers-color-scheme: dark)块内的[data-color-mode="auto"]选择器中extend占位符，匹配系统深色时的自动触发逻辑。
• 保留你已在用的属性选择器模糊匹配技巧，可进一步合并重复的属性选择器，比如用[data-color-mode*="a"]匹配所有带a字符的主题值（auto、dark均包含a，light不包含），缩短选择器长度。

示例代码 #

// 直接把原@mixin dark的所有内容搬入此处，无需修改
%dark-base {
  body {
    background: #121212;
    color: #ffffff;
  }
  .card {
    background: #1e1e1e;
    border-color: #333333;
  }
  // 原有嵌套样式、其他规则全部原样保留
}

// 强制暗色：覆盖所有系统场景
[data-color-mode="dark"] {
  @extend %dark-base;
}

// 自动模式：仅系统为深色时触发
@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"] {
    @extend %dark-base;
  }
}

编译后效果 #

原有重复生成两次的暗色属性规则，现在只会生成一次，直接砍掉约50%的暗色样式冗余代码，功能逻辑与原实现完全一致，不需要对视图层、原有浅色样式做任何修改。

注意：占位符%dark-base必须定义在全局作用域，不要嵌套在媒体查询或其他选择器内，避免SCSS编译异常。

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