如何在SCSS中分组复用类与样式？组件断点样式去重咨询

我有一个采用移动端优先策略的组件，通过媒体查询在medium-up断点添加额外样式，原始SCSS代码如下：

.mycomponent {
  // 移动端基础样式
    
  @include media-breakpoint-up(md) {
    // medium及以上断点的样式
  }
}

现在需要添加一个修饰符类.mycomponent--lg，让原本在medium-up生效的样式改为在large-up断点触发。目前用:not选择器实现了需求，但存在大量重复代码：

.mycomponent {
  // 移动端基础样式
}

.mycomponent:not(.mycomponent--lg) {
  @include media-breakpoint-up(md) {
    // medium及以上生效的样式
  }
}

.mycomponent--lg {
  @include media-breakpoint-up(lg) {
    // 和上面完全相同，但改为large及以上生效的样式
  }
}

对应的HTML结构：

<div class="mycomponent">在medium及以上断点切换样式</div>
<div class="mycomponent mycomponent--lg">在large及以上断点切换样式</div>

除了将重复样式抽离成单独文件用@import引入，有没有办法在同一文件内直接复用这些样式？

1. 用混合宏（Mixin）封装复用样式 #

把重复的断点样式封装成混合宏，通过参数传递不同断点，在需要的地方调用即可，这是SCSS里最常用的复用方式：

// 封装重复的样式逻辑
@mixin mycomponent-breakpoint-styles {
  padding: 2rem;
  display: flex;
  gap: 1rem;
  // 其他重复的样式代码
}

.mycomponent {
  // 移动端基础样式
}

.mycomponent:not(.mycomponent--lg) {
  @include media-breakpoint-up(md) {
    @include mycomponent-breakpoint-styles;
  }
}

.mycomponent--lg {
  @include media-breakpoint-up(lg) {
    @include mycomponent-breakpoint-styles;
  }
}

如果要更灵活，还可以给混合宏加上断点参数，进一步简化代码：

@mixin mycomponent-breakpoint-styles($breakpoint: md) {
  @include media-breakpoint-up($breakpoint) {
    padding: 2rem;
    display: flex;
    gap: 1rem;
    // 其他重复的样式代码
  }
}

.mycomponent {
  // 移动端基础样式

  &:not(&--lg) {
    @include mycomponent-breakpoint-styles(md);
  }

  &--lg {
    @include mycomponent-breakpoint-styles(lg);
  }
}

2. 用占位符（Placeholder）复用样式 #

占位符是SCSS专为样式复用设计的无输出选择器，通过@extend调用，编译后的CSS会自动合并相同样式，更简洁：

// 定义占位符样式
%mycomponent-breakpoint-styles {
  padding: 2rem;
  display: flex;
  gap: 1rem;
  // 其他重复的样式代码
}

.mycomponent {
  // 移动端基础样式
}

.mycomponent:not(.mycomponent--lg) {
  @include media-breakpoint-up(md) {
    @extend %mycomponent-breakpoint-styles;
  }
}

.mycomponent--lg {
  @include media-breakpoint-up(lg) {
    @extend %mycomponent-breakpoint-styles;
  }
}

3. 循环遍历断点配置（适合多场景扩展） #

如果后续可能添加更多断点修饰符，可以用@each循环遍历断点配置，一次性生成所有需要的样式：

.mycomponent {
  // 移动端基础样式

  // 定义断点与修饰符的映射
  $breakpoint-map: (
    "default": md,
    "--lg": lg
  );

  @each $modifier, $breakpoint in $breakpoint-map {
    @if $modifier == "default" {
      // 处理默认情况（无--lg修饰符）
      &:not(&--lg) {
        @include media-breakpoint-up($breakpoint) {
          padding: 2rem;
          display: flex;
          gap: 1rem;
          // 其他重复的样式代码
        }
      }
    } @else {
      // 处理带修饰符的情况
      &#{$modifier} {
        @include media-breakpoint-up($breakpoint) {
          padding: 2rem;
          display: flex;
          gap: 1rem;
          // 其他重复的样式代码
        }
      }
    }
  }
}

这种方式只需要维护$breakpoint-map，就能快速扩展新的断点修饰符，减少重复代码。

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