SASS: @extend inside of @media query

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

是否有任何解决方案，我可以做@extend在基本元素和@media query

?

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

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