使用 prefers-color-scheme 时防止重复 CSS 自定义属性

Question

我使用大约 60 个自定义属性在我的 Web 应用程序上处理主题。目前我有 2 个主题：光明和黑暗（我知道的原创）。

因为可以使用用户的偏好（通过类）以及基于他们的操作系统偏好使用：@media (prefers-color-scheme: dark) 来设置深色主题，所以我最终复制了深色主题属性。这在维护方面不是一个大问题，因为我使用 SCSS 生成主题。但它确实在输出中复制了它，我可能会删除 60 行。

为了您的观看乐趣，我删除了一些属性：

:root,
.theme--light {
  --theme-style-1: #fff;
  --theme-style-2: rgba(0, 0, 0, 0.05);
}    
@media (prefers-color-scheme: dark) {
    :root {
        --theme-style-1: #444; // duplicated
        --theme-style-2: rgba(255, 255, 255, 0.1); // duplicated
    }
}    
.theme--dark {
    --theme-style-1: #444; // duplicated
    --theme-style-2: rgba(255, 255, 255, 0.1); // duplicated
}

那么我的问题是，有没有办法防止重复？

这是生成主题的 SCSS，除了重复之外，它可以完美地工作：

:root,
.theme--light{
    @each $varName, $value in $themeBase__map {
        --#{$varName}: $value;
    }
}    
@media (prefers-color-scheme: dark) {
    :root {
    @each $varName, $value in $themeDark__map {
        --#{$varName}: $value;
    }
    }
}    
.theme--dark {
    @each $varName, $value in $themeDark__map {
        --#{$varName}: $value;
    }
}

但我尝试在媒体查询中使用 @extend .theme__dark，如下所示：

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

这会产生这个可爱的错误（这很明显）：

欣赏您可能有的任何想法。

Answer 1

您不能在媒体查询中，@extend 不能在媒体查询之外。如果它只是简单地复制它而不是尝试编写选择器，那肯定会很好。但它没有，所以你不能。

解决方案：- 使用 mixin

如果您要在媒体查询内部和外部重用一段代码，并且仍想扩展它，那么同时编写@mixin还有一个@extend 类：

@mixin foo {
    // Put something here...
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 1024px) {
    .bar {
        @include foo;
    }
}

如果有人不知道 % 选择器是什么，它只是一个占位符选择器，也就是说，它不会被编译成 CSS，但你可以重用代码。