「クラシック」CSS ルールを同じスタイルを含むメディア クエリとマージすることはできますか?

Question

同じ要素に適用され、同じスタイルを含む 2 つのルールを組み合わせることができるかどうか疑問に思っていますが、ルールの 1 つがメディア クエリ内にあり、次のような結果が得られます。

リーリー

ルールは次のとおりです:

• prefers-color-scheme に従って、.content、
に色を適用します。
• input が checked の場合、.content color を変更します

リーリー リーリー

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 でラップします。選択したテーマに基づいて変更する変数を使用してクラスを保存します。

リーリー

その後、それを別のミックスインで使用してテーマ スタイルを定義できます:

リーリー

最後に、変数を変更するだけで、これを使用して必要なだけテーマを作成できます:

リーリー

元のコードと同じ出力を見たい場合は、ここで試してください

完全なコードをコピーして貼り付けて、変換を確認します:

リーリー