"클래식" CSS 규칙을 동일한 스타일이 포함된 미디어 쿼리와 병합할 수 있나요?

Question

동일한 요소에 적용되고 동일한 스타일을 포함하는 2개의 규칙을 결합하는 것이 가능한지 궁금합니다. 하지만 규칙 중 하나가 미디어 쿼리에 있고 다음과 유사한 결과를 얻습니다.

으아아아

규칙은 다음과 같습니다.

• prefers-color-scheme 将颜色应用于 .content,
기준
• 언제 input 为 checked 时，更改 .content색상

으아아아 으아아아

prefer-color-scheme 为深色，或者选中 #dark-theme，则此处 .content 경우 검정색 배경과 흰색 색상이 제공됩니다.

두 규칙 모두 동일한 스타일을 적용합니다.

이러한 규칙을 결합할 수 있는 방법이 있나요?

Answer 1

으아악 으아악

Answer 2

네이티브 CSS를 사용하면 이 작업을 수행할 수 없습니다. 그러나 문제가 적게 작성하는 것과 관련된 경우에는 CSS 컴파일러가 이미 해당 요구 사항을 처리한 것입니다. 시도해 보고 싶다면 Sass로 작성된 간단한 코드를 참조하세요.

먼저 콘텐츠를 @mixin로 포장합니다. 선택한 테마에 따라 변경되는 변수를 사용하여 클래스를 저장합니다.

으아악

나중에 다른 믹스인에서 테마 스타일을 정의하는 데 사용할 수 있습니다.

으아악

마지막으로 이를 사용하여 원하는 만큼 많은 테마를 만들 수 있습니다. 변수만 변경하면 됩니다.

으아악

원래 코드와 동일한 출력을 보려면 여기

에서 시도해 볼 수 있습니다.

전환을 보려면 전체 코드를 복사하여 붙여넣으세요.

으아악