var() - CSS 변수(Variables), 커스텀 프로퍼티

CSS variable이라고도 불리움. 말 그대로 값을 저장하는 변수를 지정할 수 있음.

var(--header-color, blue);

Sass의 변수와의 차이

Sass의 변수와 달리 CSS 자체 지원 속성이기 때문에 인라인 스타일 코드를 통해서 동적으로 값을 변환하는 것이 가능하다.

 

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

다만 IE에서 지원하지 않는다.

참고자료

var()

Semi Circle Donut Charts