SASS如何实现媒体查询与ID选择器共用同一份主题参数？

云上老周

2026-9-30

优化方案

你可以根据自己的需求选择以下两种优化方案，两种方案编译后生成的CSS都和原有代码完全一致，没有冗余样式，同时保留所有原有逻辑：

方案1：可扩展循环版（推荐）

利用Sass的循环遍历特性封装重复逻辑，后续新增主题无需重复编写规则，维护成本极低：

// 主题映射配置，新增主题只需在此处加对应项即可
$theme-map: (
  dark: %dark-theme,
  light: %light-theme
);

// 主题样式仅需编写一次
%dark-theme {
    background: black;
    color: white;
}
%light-theme {
    background: white;
    color: black;
}

// 自动生成系统配色匹配+手动切换ID匹配的两套规则
@each $theme-name, $theme-placeholder in $theme-map {
  @media (prefers-color-scheme: #{$theme-name}) {
    body {
      @extend #{$theme-placeholder};
    }
  }
  body#switched-#{$theme-name}-mode {
    @extend #{$theme-placeholder};
  }
}

方案2：最小改动版

无需使用循环，仅调整代码结构减少重复表述，逻辑更直观：

%dark-theme {
    background: black;
    color: white;
}
%light-theme {
    background: white;
    color: black;
}

// 暗主题双场景匹配
@media (prefers-color-scheme: dark) { body { @extend %dark-theme; } }
body#switched-dark-mode { @extend %dark-theme; }

// 亮主题双场景匹配
@media (prefers-color-scheme: light) { body { @extend %light-theme; } }
body#switched-light-mode { @extend %light-theme; }