[CSS] 반복되는 CSS는 :root로 작성하자

마크업을 하다보면 색상, 폰트 크기 등등 반복되는 CSS가 많다. 이렇게 자주 반복되는 CSS라면 공통 속성으로 정의하고 관리하는 것이 추후에 유지보수에도 편리할 것이다.

:root를 이용한 전역 변수화

전역 변수 선언
:root{} 안에 --name : CSS값

변수 사용

color: var(--name);

실제 사용 예시

common.css

:root {
  --bg-color: #fafafa;
  --border-gray: solid 1px #dbdbdb;
  --bg-active: radial-gradient(circle at bottom left, #f58529 20%, #c42d91);
  --id-color: #262626;
  --sub-color: #8e8e8e;
  --high-color: #0095f6;
  --hash-color: #00376b;
  --font-gray: #c7c7c7;
  --font-bold: 600;
}

nav .search_wr i {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: var(--sub-color);
  font-size: 1rem;
}

이처럼 폰트 사이즈, 색상 등 다양한 CSS값 모두 변수로 지정하고 사용할 수 있다.