[CSS] CSS에서 전역변수 추가하기

 

CSS에서 전역변수 추가하기

전역변수 선언하기

:root 라는 가상 클래스에 전역변수를 선언할 수 있습니다.

다른 속성 선언하는 방식과 비슷합니다. 앞에 하이픈 2개 ("--")만 붙여주면 됩니다.

:root {
	--main-color: #123456;
    --sub-color: #654321;
}

 

전역변수 사용하기

 var(변수명)과 같이 사용할 수 있습니다.

.screen {
  background-color: var(--main-color);
}

.button {
  background-color: var(--sub-color);
}