SASS：@媒体查询的内部扩展

Question

我有简单的SCSS代码，@Extended在@MediaQuery中。

SCSS编译器在这两个变体上都给了我错误：

变异1:

%dark-theme {
    background: $dark-background;
}

%light-theme {
    background: $light-background;
}

@media (prefers-color-scheme: light) {
    body {
        @extend %light-theme;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        @extend %dark-theme;
    }
}

变异2

%dark-theme {
    background: $dark-background;
}

%light-theme {
    background: $light-background;
}

@media (prefers-color-scheme: light) {
    @extend %light-theme;
}

@media (prefers-color-scheme: dark) {
    @extend %dark-theme;
}

是否有任何解决方案可以在基本元素中以及在@media查询中执行@扩展

Answer 1

您不能在媒体查询中使用@extend。相反，您可以在要扩展的类中使用媒体查询。

%dark-theme {
    @media (prefers-color-scheme: dark) {
        background: $dark-background;
    }
}

%light-theme {
    @media (prefers-color-scheme: light) {
        background: $light-background;
    }
}

body {
    @extend %light-theme;
    @extend %dark-theme;
}

混音也是另一种选择。

Answer 2

...or您可以简单地使用mixins：

@mixin dark-theme {
    background: $dark-background;
}

@mixin light-theme {
    background: $light-background;
}

@media (prefers-color-scheme: light) {
   body {
    @include light-theme;
   }
}

@media (prefers-color-scheme: dark) {
  body {
    @include dark-theme;
  }
}