SASS：@media查询中的@extend

Question

我有一个与SCSS代码相关的简单代码，其中在@media查询内部有@extend。

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

有没有办法在基本元素和媒体查询中使用@extend的解决方法？

- Matúš Rebroš

---

这可能有助于回答你的问题：https://dev59.com/4WUq5IYBdhLWcg3wC8BQ - Rehan Butt

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

混入也是一种替代方案。

- Scipion

Answer 2

或者您可以简单地使用mixin：

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

- scooterlord