SASS: @extend inside @media 查询

Question

我有一个带有 SCSS 代码的简单代码，其中 @extend 在 @media query.

中

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 query 中执行 @extend 吗？

Answer 1

您不能在媒体查询中使用 @extend。不过，你可以用另一种方式来做，在你正在扩展的 class 中使用媒体查询。

%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;
}

mixin也是一种替代

Answer 2

...或者你可以简单地使用 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;
  }
}

SASS: @extend inside @media 查询

SASS: @extend inside of @media query

css

sass