是否可以將「經典」CSS 規則與包含相同樣式的媒體查詢合併？

Question

我想知道是否可以組合應用於同一元素並包含相同樣式的 2 個規則，但其中一個規則位於媒體查詢中並獲得類似於以下內容的內容：

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

規則是：

• 根據 prefers-color-scheme 將顏色套用到 .content，
• 當 input 為 checked 時，變更 .content 顏色

: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>

如果 prefer-color-scheme 為深色，或選取 #dark-theme，則此處 .content 將獲得黑色背景和白色。

這兩個規則套用相同的樣式。

有沒有辦法結合這些規則？

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