SASS如何合并普通选择器与mixin媒体查询内的重复样式规则

以下两种方案都可以消除源码层面的重复声明，且完全保留原有样式优先级，不需要使用!important：

方案1：占位符选择器提取公共样式 #

// 定义公共样式占位符，不会单独输出CSS
%p-reset {
  margin: 0;
}

p {
  @extend %p-reset;
}

@include desktop() {
  p {
    @extend %p-reset;
  }
}

编译后CSS逻辑和原写法完全一致，仅需要维护一处重置规则。

方案2：封装跨断点应用mixin（写法最简洁） #

// 封装工具mixin，自动将规则同时应用到全局和桌面断点
@mixin with-desktop {
  & {
    @content;
  }
  @include desktop() {
    & {
      @content;
    }
  }
}

// 调用时仅需声明一次规则
p {
  @include with-desktop {
    margin: 0;
  }
}

最终编译输出的CSS和你的原始代码100%一致，后续修改规则仅需调整一次。

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