CSS 네이티브 변수를 미디어 쿼리에 사용할 수 있나요?

미디어 쿼리에서 CSS 네이티브 변수 사용

CSS 네이티브 변수는 CSS. 그러나 미디어 쿼리에서 이러한 변수를 사용하는 데는 제한이 있습니다.

미디어 쿼리에서 CSS 변수를 사용하려고 할 때 문제가 발생합니다. 예를 들어 다음 코드를 고려해보세요.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

이 코드는 뷰포트 너비가 --mobile-breakpoint 변수에 저장된 값보다 작거나 같을 때 스타일을 적용하는 미디어 쿼리를 정의하는 것을 목표로 합니다. 그러나 CSS 변수는 미디어 쿼리에 사용할 수 없기 때문에 이 접근 방식은 작동하지 않습니다.

CSS 사양에는 CSS 변수에 액세스하는 데 사용되는 var() 함수가 속성 값에만 사용될 수 있다고 명시되어 있습니다. 속성 이름, 선택기 또는 미디어 쿼리에는 사용할 수 없습니다. 이 제한은 CSS 문서의 구조나 기능을 수정하는 대신 CSS 변수가 스타일 값을 제어하는 ​​의도된 목적으로 사용되도록 하기 위해 부과됩니다.

이 문제를 해결하려면 다음과 같은 CSS 전처리기를 사용할 수 있습니다. Sass 이하. 이러한 전처리기를 사용하면 코드를 유효한 CSS로 변환하여 미디어 쿼리에서 변수를 사용할 수 있습니다. 전처리기를 사용하면 이전 코드를 다음과 같이 다시 작성할 수 있습니다.

$mobile-breakpoint: 642px;

@media (max-width: $mobile-breakpoint) {

}

전처리기를 사용하면 $mobile-breakpoint 변수를 미디어 쿼리 내에서 사용할 수 있으므로 정의된 스타일에 따라 원하는 스타일 동작을 허용할 수 있습니다. 변수입니다.

위 내용은 CSS 네이티브 변수를 미디어 쿼리에 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!