SASS：@media 查询中的 @extend答案

【问题标题】：SASS: @extend inside of @media querySASS：@media 查询中的 @extend
【发布时间】：2021-11-27 12:39:23
【问题描述】：

我有简单的 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 查询中执行 @extend 吗？

【问题讨论】：

这可能有助于回答您的问题：stackoverflow.com/questions/14840918/…

标签： css sass

【解决方案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;
}

mixin 也是一种选择

【讨论】：

【解决方案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;
  }
}

【讨论】：