CSS 변수를 사용하는 방법

프로젝트를 하다 보면 공통적으로 많이 들어가는 CSS내용이 반복되기도 한다.

그 부분을 변수로 통일하여 사용을 하는 방법을 알게 되어 적으려 한다.

 

 

 

CSS 변수 선언하는 방법

--variable-name: value;

여기서 variable-name은 개인이 직접 변수명을 정의하는 것이다. 그리고 그 변수명 뒤로 value 또한 변수에 대한 값을 적는 것이다.

 

 

CSS 변수 사용하는 방법

property: var(--variable-name);

 

 

예제

방법만으로는 이해할 수 없으니 예시를 보여주려 한다.

예시이미지입니다.

여기서 root는 CSS는 최상단 CSS에 작업을 하면, h1에서 변수를 사용하듯 어디에서나 사용할 수 있다.

이렇게 쓰이면 실무에서는 메인컬러를 변수로 사용하면 필요에 따라 전체 칼라를 손쉽게 바꿀 수 있을 것이다.

 

 

 

이 CSS 변수는 최근에 겨우 알게 된 방법이였다.

진작 알았다면 고생할 일이 없었을 텐데...

이제라도 알게 되어 다행이라 생각한다.