:root 가상 클래스로 변수를 선언하면 HTML 문서 최상단에 선언되기 때문에 모든 요소에서 :root에 접근하여 변수를 사용할 수 있다.
최상위 요소 html을 선택자로 해서 선언할 수도 있지만 :root라는 가상 선택자는 class로 간주되어 우선 순위 점수가 더 높게 부여된다. 그러므로 :root 선택자를 사용해서 선언한다.
전역 CSS 변수 선언하기
:root {
--color-black: #3f454d;
--color-white: #ffffff;
--pane-padding: 5px 42px;
}
body {
background-color: var(--color-black);
}:root를 이용해서 전역 변수에 색상을 담아 놓고 사용하면 색상을 변경하고 싶을 때 일일이 색상을 바꾸지 않고 변수에 할당된 값만 변경해주면 전역에 걸쳐서 색상이 바뀌기 때문에 유용하게 사용할 수 있다.
작성법
- 가상 클래스
:root를 만들고 중괄호 내부에 프로퍼티(변수명), 값을 작성한다. - 프로퍼티 이름 앞에 --를 표기해서 사용한다.
- 값에는 CSS 속성값을 작성해야 한다.