如何使用 scss 同时使用媒体查询和选择器？

Question

所以我正在创建一个支持深色模式的网络应用程序。

如果设备默认喜欢暗模式，它将通过媒体查询使用暗模式@media (prefers-color-scheme: dark)。

但我也想有一个功能，用户可以通过在正文中添加一个属性来手动切换到深色模式：data-theme="dark"。

所以我尝试了这个：

// ...

.ChatScreen {
    background-color: #eee;
}

@media (prefers-color-scheme: dark), body[data-theme="dark"] {
    .ChatScreen {
        background-color: #000;
    }
}

编译时出现这个错误：

Failed to compile.

./src/scss/app.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/scss/app.scss)
SassError: Invalid CSS after "...me: dark), body": expected "{", was '[data-theme="dark"]'
        on line 107 of src/scss/screens/_chat.scss
        from line 6 of /Users/****/src/scss/app.scss
>> @media (prefers-color-scheme: dark), body[data-theme="dark"] {

   -------------------------------------^

如何在不重复这些代码的情况下实现这一点？

Answer 1

@media (prefers-color-scheme: dark) {
  body {
    &[data-theme="dark"] {
   .ChatScreen {
        background-color: #000;
    }
   }
  }
}

您可以查看 sass mixins 并定义您的深色样式，然后在需要的任何地方包含该规则。

编辑

@mixin dark-theme {
  .ChatScreen {
        background-color: #000;
    }
}

@media (prefers-color-scheme: dark) {
    @include dark-theme;
}

body {
    &[data-theme="dark"] {
        @include dark-theme;
   }
}

如何使用 scss 同时使用媒体查询和选择器？

How to use media query and selectors at the same time using scss?

css

sass

media-queries