root란?

:root는 문서의 루트요소를 선택한다.
html의 루트요소는 이다.

css변수

css:root를 이용하여 재사용할 값을 담을 변수를 만든다.

변수의 이름을 지정할때는 변수 맨 앞에 '--'를 붙인다.

:root{
--white-color: #fff;
--font-large: 16px;
}

변수지정한 후엔 css에 var(--변수명)으로 부르면 된다.

.bg-white{
baground-color:var(--white-color);
}

:root의 경우 ie8에선 먹히지않는다^^