[CSS] CSS 변수 사용하기

CSS에서도 변수를 사용할 수 있다고?

사용자 지정 속성을 사용하여 CSS에서 변수를 사용할 수 있다.

사용자 지정 속성(CSS 변수, 종속 변수): CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다.

 

표기법

--main-coor: black;과 같이 정의할 변수명 앞에 --를 붙이면 된다.

 

사용법

정의한 변수를 재사용할 경우에는 color: var(--main-color);와 같이 var 안에 변수명을 넣어서 사용할 수 있다.

 

예시

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

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

 

참고 문서

• https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties