미디어 쿼리 선언에서 CSS 변수를 원하십니까? 이 시도!

당신이 나와 같다면 아마도 stretching CSS variables / custom properties to their limits 자신만의 디자인 시스템을 구축하는 동안이었을 것입니다. 그러나 이 "은색 총알"은 심각한 장애물로 이어질 수 있습니다. 미디어 쿼리 선언에서 사용할 수 없습니다.

명확히하기 위해 다음과 같은 행동을 취할 수 있습니다.

:root {
    --mobile-breakpoint: 600px;
    --tablet-breakpoint: 900px;
}

@media(max-width: var(--mobile-breakpoint)) {
    .obligatory-hamburger-menu { visibility: visible }
}

...슬프게도 작동하지 않습니다 😣

🙅 @media 선언에서 var()가 작동하지 않는 이유

이것은 처음에는 혼란스러워 보일 수 있습니다. 페이지의 :root에서 변수를 사용할 수 있는 경우 미디어 쿼리에서 액세스할 수 없는 이유는 무엇입니까?
:root 요소가 실제로 의미하는 바는 HTML 문서의 루트 요소입니다. 그러나 개념적으로 미디어 쿼리는 HTML 요소에 전혀 연결되지 않습니다. 이러한 선언은 CSS가 구문 분석되는 동안 처리되므로 :root를 보고 변수 값을 가져올지 모릅니다.

이것이 혼란스러워 보인다면 body 요소에 있는 다음과 같은 CSS 변수를 고려해 보겠습니다.

body {
    --mobile-breakpoint: 600px;
}
@media(max-width: var(--mobile-breakpoint)) {...}

분명히 우리의 @media 쿼리는 --mobile-breakpoint 요소에 "속하지"않기 때문에 이 body 변수에 대해 알지 못합니다. 젠장, 그것은 HTML의 어떤 요소에도 속하지 않습니다. 이것이 우리의 :root 솔루션이 작동하지 않는 이유를 설명합니다.

Sass/SASS는 @media 블록이 다른 규칙 세트 내부에 "중첩"되도록 허용하여 이를 훨씬 더 혼란스럽게 만들 수 있습니다. 속지마! 멋진 Sass가 컴파일되면 해당 미디어 쿼리가 CSS 문서의 기본으로 다시 떠오릅니다.

CSS "환경" 변수에 대한 희망

운이 좋으면 W3C도 이 제한 사항에 만족하지 않습니다. Their proposal "환경"변수에 대한 것은 현재 가장 초기 단계(2021년 5월 현재 1단계)이지만 바로 이 문제를 해결하는 것 같습니다!

시간이 지남에 따라 변경될 가능성이 있으므로 구문을 표시하지 않겠습니다. @media 선언과 같은 사용 사례의 경우 HTML 요소 수준을 넘어서 존재하는 변수를 처리하기 위한 것임을 알아두십시오.

🤔 시도할 수 있는 해결 방법

미디어 쿼리 변수를 원하고 지금 원하는 경우 몇 가지 옵션을 사용할 수 있습니다.

Sass/SCSS 사용자용

첫 번째는 기존 Sass 사용자에게 권장하는 것입니다. 미디어 쿼리에 대해서는 Sass 변수로 대체하고 다른 모든 곳에서는 CSS 변수를 사용합니다.

이는 CSS 변수와 달리 Sass 변수가 CSS 규칙 세트에 "속해"있지 않기 때문입니다. SASS가 올바른 값을 선택하여 "붙여넣기"할 수 있는 구문상의 설탕 조각일 뿐입니다. 수학 계산을 위해 calc() 함수를 사용하는 대신 Sass로 폴백해야 한다는 점만 알아두십시오(이것도 유효하지 않기 때문입니다!)

/* ✅ good */
@media(max-width: $mobile-breakpoint + 50px) {...}
/* ❌ bad */
@media(max-width: calc($mobile-breakpoint + 50px)) {...}

다른 사람을 위해

Sass를 사용하지 않거나 변수에 대해 2가지 다른 구문을 사용하지 않으려는 경우 시도할 수 있는 neat PostCSS plugin이 있습니다. 이것을 기존 CSS 빌드 단계(또는 당신의 의지에 반하는 빌드 단계를 소개합니다 😣)와 BAM에 붙이기만 하면 됩니다! CSS 변수와 CSScalc() 기능은 미디어 쿼리 선언에서 작동합니다 👍

⚠️ 이 솔루션에 대한 주의 사항. 현재 브라우저 표준에 따라 유효하지 않은 CSS를 작성하고 유효하게 만들 것입니다. 이는 새로운 코드베이스 기여자에게 매우 혼란스럽게 보일 수 있습니다. 이 경로를 사용하기로 결정했다면 최소한 이 플러그인을 프로젝트 README에 문서화하십시오.

조금 배우나요?

그것을 듣고 기뻐! 이와 같이 보다 보편적인 웹 개발 솔루션을 원하신다면 격주로 제공되는 지식 정보를 얻으실 수 있습니다sign up for the web wizardry newsletter 🧠