| 사용

1. 변수 선언

CSS에서 변수를 선언할 때는 '--'를 접두사로 사용해서

변수 이름을 정의하면 됩니다.

:root {

--main-color: red;

}

보통 변수를 선언할 때 :root 선택자를 사용합니다.

→ :root 선택자는 HTML문서에서 최상위 요소를 나타냄

위에 코드에서는 :root 선택자를 사용해서 문서의 루트요소에 '--main-color'라는 변수를 선언하고

변수의 초기값을 빨간색인 red로 지정해 주었습니다.

선언한 css변수를 사용하고 싶으면 var() 함수를 사용해 변수 이름을 참조하면 됩니다.

div {

background-color: var(--main-color);

}