:root와 var의 조합은 정말 개편합니다.

이거는 어떻게 쓰냐면 

:root {
	--main-color: #8d140a;
	--sub-color: #ac4404;
	--back-color: #f7ce1b;
}

이런 식으로 :root를 만든 다음 색깔명과 rgb 코드를 넣고 

::selection {color:var(--main-color);
background-color:var(--back-color);}

그 할당한 색깔을 쓸 때는 var(이름) 이런 식으로 쓴다. (형식이 망한 이유는 워드프레스에 적용한거 통으로 갖고온거라... 에디터는 알아서 이쁘게 잡아줍니다 여러분)

 

보통 CSS에서는 

* {color:#000000;}

이렇게 쓴다. 보통은 이렇게 쓰는데 문제가 뭐냐면, 이거는 나중에 색을 바꿀 때 일일이 요소별로 찾아서 바꿔야 한다. 그나마 색깔 코드가 통일된 게 있으면 찾아바꾸기 신공이라도 쓰면 되지만, 이런 요소가 많아지면 피곤하그덩... 근데 var는 이럴 때 :root에 있는 해당 색깔만 바꾸면 다 바뀌기때문에 편하다.