Ist es möglich, „klassische' CSS-Regeln mit Medienabfragen zusammenzuführen, die denselben Stil enthalten?

Question

Ich habe mich gefragt, ob es möglich ist, zwei Regeln zu kombinieren, die für dasselbe Element gelten und denselben Stil enthalten, aber eine der Regeln befindet sich in einer Medienabfrage und ergibt etwas Ähnliches wie:

.a,
.b .a {
  color: white;
  background-color: black;
}

Die Regeln sind:

• Basierend auf prefers-color-scheme 将颜色应用于 .content,
• Wenn input 为 checked 时，更改 .content Farbe

:root {
  --dark-color: white;
  --dark-bg: black;
  --light-color: black;
  --light-bg: white;
}

@media (prefers-color-scheme: dark) {
  .content {
    color: var(--dark-color);
    background-color: var(--dark-bg);
  }
}
#dark-theme:checked~.content {
  color: var(--dark-color);
  background-color: var(--dark-bg);
}

@media (prefers-color-scheme: light) {
  .content {
    color: var(--light-color);
    background-color: var(--light-bg);
  }
}
#light-theme:checked~.content {
  color: var(--light-color);
  background-color: var(--light-bg);
}

<input type="radio" name="color-theme" id="dark-theme">
<label for="dark-theme">dark</label>
<input type="radio" name="color-theme" id="light-theme">
<label for="light-theme">light</label>
<input type="radio" name="color-theme" id="default-theme" checked>
<label for="default-theme">default</label>

<div class="content">Test</div>

Wenn prefer-color-scheme 为深色，或者选中 #dark-theme，则此处 .content, erhalten Sie einen schwarzen Hintergrund und eine weiße Farbe.

Beide Regeln gelten für den gleichen Stil.

Gibt es eine Möglichkeit, diese Regeln zu kombinieren?

Answer 1

:root {
  --dark-color: white;
  --dark-bg: black;
  --light-color: black;
  --light-bg: white;
}

@media (prefers-color-scheme: dark) {
  #default-theme:checked~.content {
    color: var(--dark-color);
    background-color: var(--dark-bg);
  }
}
#dark-theme:checked~.content {
  color: var(--dark-color);
  background-color: var(--dark-bg);
}

@media (prefers-color-scheme: light) {
  #default-theme:checked~.content {
    color: var(--light-color);
    background-color: var(--light-bg);
  }
}
#light-theme:checked~.content {
  color: var(--light-color);
  background-color: var(--light-bg);
}

dark

light

default

Test

Answer 2

你无法使用原生 CSS 来做到这一点。但是，如果您的问题与减少编写有关，那么 CSS 编译器已经满足了这种需求。 如果你愿意尝试，这是用 Sass 编写的简单代码。

首先，您可以将内容包装在 @mixin 中。它将使用一个变量存储您的类，该变量应根据所选主题进行更改。

@mixin content-style($theme) {
  .content {
    color: var(--#{$theme}-color);
    background-color: var(--#{$theme}-bg);
  }
}

之后，您可以在另一个 mixin 中使用它来定义主题样式：

@mixin themed-style($theme) {
  @media (prefers-color-scheme: $theme) {
    @include content-style($theme);
  }
  ##{$theme}-theme:checked ~ {
   @include content-style(#{$theme});
  }
}

最后，您可以使用它来创建尽可能多的主题，只需更改变量即可：

@include themed-style(dark);
@include themed-style(light);

如果您想查看与原始代码相同的输出，可以此处尝试

复制粘贴完整代码以查看转换：

:root {
    --dark-color: white;
    --dark-bg: black;
    --light-color: black;
    --light-bg: white;
}

@mixin content-style($theme) {
  .content {
    color: var(--#{$theme}-color);
    background-color: var(--#{$theme}-bg);
  }
}

@mixin themed-style($theme) {
  @media (prefers-color-scheme: $theme) {
    @include content-style($theme);
  }
  ##{$theme}-theme:checked ~ {
   @include content-style(#{$theme});
  }
}

@include themed-style(dark);
@include themed-style(light);