SCSS 如何分组和重用类和样式块？

Question

我有一个组件使用媒体查询在

medium-up

断点上添加新样式。

SCSS 看起来像这样：

.mycomponent {
  // Bunch of mobile-first styles and classes
    
    @include media-breakpoint-up(md) {
      // Bunch of styles and classes for medium and up.
    }
}

但是，我现在想添加一个修改器，它实际上是在大型和向上添加中等和向上样式。

我可以这样做，使用

:not

选择器：

.mycomponent {
  // Bunch of mobile-first styles and classes
}

.mycomponent:not(.mycomponent--lg) {
    @include media-breakpoint-up(md) {
      // Bunch of styles and classes that appear on med-up
    }
}

.mycomponent--lg {
    @include media-breakpoint-up(lg) {
      // Bunch of styles and classes identical to above but now appearing on lg-up
    }
}

HTML 看起来像：

<div class="mycomponent">Shows different styling on medium and up</div>
<div class="mycomponent mycomponent--lg">Shows different styling on large and up</div>

上面的 SCSS 可以工作，但是我有很多重复。每个断点之间的样式和类是相同的。

除了将样式放在自己的文件中并使用

@import

之外，有没有办法将它们分组在同一页面上，并在我需要时将它们拉入每个断点？

Answer 1

SCSS 的

%placeholder

本来是个好主意，但放在媒体查询中时它们似乎不起作用。

相反，我不得不做一个

mixin

：

.mycomponent {
  // Bunch of mobile-first styles and classes
}

@mixin desktopStyles {
  // Bunch of styles and classes for larger break points
}

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

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