:root를 사용하는 이유

CSS에는 여러 가지 속성들이 있지만 그 중에서도 자주 쓰이는 것들이 있는데 예를 들면 font, margin, padding 등이다. CSS를 작성할 때 웹 페이지의 통일성을 위해 자주 쓰이는 속성들은 대부분 값을 같게 해준다. 요소마다 각각 정의해서 사용하면 속성 값이 바뀔 때 하나하나 찾아서 모두 바꿔주어야 하는 불상사가 생긴다.

이를 위해 고안된 것이 :root 가상 클래스이다. :root는 최상위에 정의하고 모든 요소에서 변수처럼 사용할 수 있다.

사용법

• 변수 선언

:root {
    --속성이름-세부: 값;
}

:root {
    /* color */
    --color-white: #ffffff;
    --color-blue: #003cff;
    --color-red: #ff0000;
}

• 변수 사용

div {
    color: var(--color-blue);
    background-color: var(--color-red);
}

• 예시로 color만 사용했지만 모든 요소들도 사용 가능하다.
• 속성이름과 세부이름은 알기 쉽게 정하는 것이 좋다.