[css] 변수로 색상 지정하기

sass를 이용하면 변수에 색상값을 지정하여 호출할 수 있다.

하지만 개인적으로 sass는 유지보수 부분에서 조금 까다롭게 느껴진다.

예를 들어 하나의 스타일을 바꾸기 위해선 그의 부모나 관계를 역으로 따라 올라가서 파악하는데의 시간도 소요되며 인수인계시 소스를 파악하는데 어려움이 따른다.

 

sass도 css를 기반으로 하는 것이기에 순수 css 선호한다.

작업 포지션이 독립적으로 퍼블리싱을 하고 있기 때문인지도 모른다.

만약 협업해야하는 상대가 2명 이상이 있을 상황이였을땐 생각이 달라질 수도.

 

서론이 길었다.

 

css 자체에서 root에 변수로 색상을 지정하여 var 형태로 호출하여 사용할 수 있다.

:root {
  --point-color-orange: #ff543a;
  --point-color-pink: #de7a83;
  --point-color-yellow: #f8d622;
  --point-color-beige: #fbeaad;
  --point-color-green: #14e090;
  --point-color-purple: #7217fb;
}

 위와 같은 형태로 -- 다음 변수를 지정하여 해당 색상을 사용할 때는 색상코드 대신에 변수를 호출해주면 된다.

예를 들면 아래와 같이 사용할 수 있다.

.element {
	color: var(--point-color-beige, #fbeaad);
}

뒤의 색상코드를 써주는건 선택이다.

만약 해당 변수를 읽어오지 못할 때 써준 색상코드를 불러온다.