CSS 변수는 웹 디자인에서 스타일을 일관되게 유지하고 코드를 더 관리하기 쉽게 만들어줍니다. 하지만 때때로 특정한 조건에 따라 변수 값을 바꿔야 할 때가 있습니다. 이때 CSS 변수를 다시 할당하여 스타일을 동적으로 변경할 수 있습니다.

CSS 변수 정의

CSS 변수를 정의할 때는 다음과 같은 형식을 사용합니다.

:root {
  --main-color: #ff0000;
}

.element {
  color: var(--main-color);
}

:root는 문서의 최상위 요소를 가리키는 가상 클래스입니다. 이 곳에서 변수를 정의하면 전역적으로 사용할 수 있게 됩니다.

변수 재할당

재할당된 변수 값은 원본 변수값을 덮어씁니다. 다음은 예시입니다.

:root {
  --main-color: #ff0000;
}

.element {
  color: var(--main-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #00ff00;
  }
}

위 코드에서는 prefers-color-scheme 미디어 쿼리를 사용하여 다크 모드에 맞게 --main-color 변수를 다시 지정하고 있습니다.

위와 같이 CSS 변수를 다시 할당하여 원하는 스타일을 동적으로 적용할 수 있습니다.