동일한 요소에 적용되고 동일한 스타일을 포함하는 2개의 규칙을 결합하는 것이 가능한지 궁금합니다. 하지만 규칙 중 하나가 미디어 쿼리에 있고 다음과 유사한 결과를 얻습니다.
으아아아규칙은 다음과 같습니다.
prefers-color-scheme
将颜色应用于 .content
, input
为 checked
时,更改 .content
색상으아아아 으아아아
prefer-color-scheme
为深色,或者选中 #dark-theme
,则此处 .content
경우 검정색 배경과 흰색 색상이 제공됩니다.
두 규칙 모두 동일한 스타일을 적용합니다.
이러한 규칙을 결합할 수 있는 방법이 있나요?
P粉1639513362024-02-04 17:54:23
P粉5433443812024-02-04 09:45:35
네이티브 CSS를 사용하면 이 작업을 수행할 수 없습니다. 그러나 문제가 적게 작성하는 것과 관련된 경우에는 CSS 컴파일러가 이미 해당 요구 사항을 처리한 것입니다. 시도해 보고 싶다면 Sass로 작성된 간단한 코드를 참조하세요.
먼저 콘텐츠를 @mixin
로 포장합니다. 선택한 테마에 따라 변경되는 변수를 사용하여 클래스를 저장합니다.
나중에 다른 믹스인에서 테마 스타일을 정의하는 데 사용할 수 있습니다.
으아악마지막으로 이를 사용하여 원하는 만큼 많은 테마를 만들 수 있습니다. 변수만 변경하면 됩니다.
으아악원래 코드와 동일한 출력을 보려면 여기
에서 시도해 볼 수 있습니다.전환을 보려면 전체 코드를 복사하여 붙여넣으세요.
으아악