[CSS] 변수 선언 및 사용법

CSS에서도 변수를 선언하고 사용할 수 있다는 점을 저번 공부를 통해서 알게 되었는데, 이번에 개인적으로 하는 프로젝트에서 사용하게 되어서 다시 한번 정리해볼까 한다.😁

1. CSS 변수 선언은 :root{}로 하자

:root {
--white-color: #fff;
--black-color:#140a00;
--grey-dark-color:#909090;
}

2. CSS 변수 사용은 var()를 사용하자

h1 {
color:var(--white-color);
}

h2 {
color:var(--black-color);
}

통일 되어야하는 폰트 색상의 rgb값과 같이 자주 사용해야하는 값을 변수에 등록해서 필요할 때 마다 사용하면 가독성도 높이고 코드도 간결하게 작성할 수 있어서 굉장히 도움이 된다.