미디어쿼리 에는 왜 CSS변수를 사용할 수 없을까?

정확히 말하면 미디어쿼리의 조건문에 css변수를 사용할 수 없을까 입니다.

 

최근 프로젝트에서 module.css를 사용하면서 CSS 변수를 적극적으로 활용하려고 했습니다.
일관된 스타일을 유지하기 위해 breakingPoint 변수도 정의하여 반응형 레이아웃을 일정하게 관리하려 했습니다.

:root {
  --breaking-point-sm: 468px;
}

.container {
  width: 100%;
}

@media (max-width: var(--breaking-point-sm)) {
  .container {
    width: 90%;
  }
}

하지만 위 코드에서 var(--breaking-point)는 미디어쿼리의 조건문에서 작동하지 않습니다.
즉, 미디어쿼리의 조건문에는 CSS 변수를 직접 사용할 수 없습니다.

 

❓ 왜 CSS 변수를 미디어쿼리에서 사용할 수 없을까?

CSS 변수는 런타임에 동적으로 변경될 수 있지만, 미디어쿼리의 조건문은 CSS 파싱 단계에서 평가되기 때문입니다.
즉, var(--breaking-point) 값이 파싱 전에 결정되지 않기 때문에 미디어쿼리 내부에서 사용할 수 없는 것입니다.

 

:root {
  --color-primary: red;
}

.container {
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .container {
    --color-primary: blue; /* 미디어쿼리 내부에서 CSS 변수 변경 가능 */
    color: var(--color-primary); /* 변경된 값이 적용됨 */
  }
}

이 코드에서는 --main-color 변수를 정의하고, 미디어쿼리 내부에서 값을 변경하여 적용할 수 있습니다.
즉, 미디어쿼리 내부에서는 CSS 변수를 사용할 수 있지만, 미디어쿼리의 조건문에는 사용할 수 없습니다.

 

해결 방법

정리해보면,
CSS변수는 런타임에 동적으로 변경되지만 , 미디어 쿼리에서의 조건문은 컴파일 단계 에서 값을 결정 하기떄문에, CSS변수의 값을 제대로 가져오지 못한다.

이를 해결하는 방법으로는

• SCSS를 사용하여, 컴파일 시점에 변수를 결정하는 방법
• JS의 matchMedia를 활용해, 미디어쿼리를 감지하고, 스타일을 동적으로 변경하는 방법

이렇게 두가지 방식이 있는 것 같습니다.