同じ要素に適用され、同じスタイルを含む 2 つのルールを組み合わせることができるかどうか疑問に思っていますが、ルールの 1 つがメディア クエリ内にあり、次のような結果が得られます。
リーリールールは次のとおりです:
prefers-color-scheme
に従って、.content
、 が
checked の場合、
.content color
を変更します
prefer-color-scheme
が暗い場合、または #dark-theme
がチェックされている場合、ここの .content
は黒の背景と白の色になります。 。
どちらのルールも同じスタイルを適用します。
これらのルールを組み合わせる方法はありますか?
ネイティブ CSS を使用してこれを行うことはできません。ただし、問題が記述量の減少に関連している場合は、CSS コンパイラーがすでにそのニーズに対応しています。 試してみたい場合は、Sass で書かれた簡単なコードを次に示します。
まず、コンテンツを
リーリー@mixin
でラップします。選択したテーマに基づいて変更する変数を使用してクラスを保存します。その後、それを別のミックスインで使用してテーマ スタイルを定義できます:
リーリー最後に、変数を変更するだけで、これを使用して必要なだけテーマを作成できます:
リーリー元のコードと同じ出力を見たい場合は、ここで試してください
完全なコードをコピーして貼り付けて、変換を確認します:
リーリー