CSS 변수를 정리하면서

변수 선언하기

element {
  --main-bg-color: brown;
}

 

변수 사용 방법

element {
  background-color: var(--main-bg-color);
}

 

 

변수를 선언할 때는 특정한 선택자에 선언해야한다.

:root 선택자로 선언하면 그 아래 후손들은 모두 변수를 사용할 수 있다.

 

:root는 가상클래스 선택자

최상위 요소를 선택하는 가상클래스 선택자이다.

이는 html 선택자를 적은 것과 동일하다.

:root {
  --main-bg-color: brown;
}

:root를 사용하는 이유는 

CSS의 명시도 때문이다.

 

태그 선택자는 명시도가 1점이지만

가상클래스 선택자는 명시도가 10점이다.

 

명시도가 높아야 안정적이다.(큰 차이는 없음)

 

 

사용자 지정 속성 대안 값

주어진 변수가 아직 정의되지 않았을 때, var() 를 이용하여 여러 개의 대체 변수를 정의할 수 있다. 

.two {
  color: var(--my-var, red); /* --my-var가 정의되지 않았을 경우 red로 표시됨 */
}