css도 프로그래밍 언어처럼 써보자! 다음 팔레트를 참고하여 변수로 만들고, 여태껏 색상을 하드하게 넣은 곳에 전부 변수를 사용하게끔 수정하는 작업을 해 보았다.

CSS 변수 활용

선언

다음과 같이 모든 html파일에서 읽어오는 글로벌 스타일시트 파일에(나의 경우 style.css) :root라는 선택자로 선언한다. css변수명은 항상 더블 하이픈(--)으로 시작한다.

/* styles.css */
:root {
  /* color variables */
  --black: #111322;
  --white: #ffffff;
  --primary: #6d6afe;
  --red: #ff5b56;
  --gray-1: #f0f6ff;
  --gray-2: #e7effb;
  --gray-3: #ccd5e3;
  --gray-4: #9fa6b2;
  --gray-5: #3e3e43;
}

처음 변수명을 작명할 때 고민이 많았다. 5개가 되는 회색을 어떻게 작명하지? css variable naming best practice라고 검색하여 이곳에서 다양한 회사에서 사용하는 네이밍 컨벤션을 참고하였다. 결국 숫자를 붙이는것이 가장 기억하기 쉽고 의미를 전달하기도 쉽다는 것이 결론이다.

사용

css의 var()함수를 사용하여 변수를 사용할 수 있다. 예를 들어 footer의 배경색을 우리 팔레트(변수 모음)의 블랙 색상으로 하고 싶다면, 다음과 같이 지정해주면 된다.

footer {
  ...
  background-color: var(--black);
  ...
}

기존 코드 CSS변수로 대체하기

일단 색상 변수는 선언했는데.. 지금까지 컬러코드로 하드하게 지정해줬던 부분은 언제 다 변수로 대체하지?

라는 생각이 먼저 들었지만, vscode에디터의 기능 중 search and replace기능이 있다는 것을 기억하고 안도했다. 다음 순서에 따라 vscode해당 기능을 사용하였다.

1. 변수로 선언해준 컬러코드를 차례로 검색

vscode에서 아래 사진처럼 검색 후 검색한 단어를 replace해줄 단어를 밑의 칸에 써준다. 예시의 경우 #6d6aaf를 var(--primary)로 대체하려고 검색한 모습이다.

2. var(--[변수명])으로 replace

여기서 vscode의 search and replace기능의 편리함을 알 수 있는데, 전부 대체하는 것이 아닌 내가 cherry pick해서 원하는 부분만 대체할 수 있다. 예를 들어 style.css에서 변수를 선언할 때 사용한 컬러코드는 대체하면 안되므로 해당 부분은 대체 대상에서 꼭 제외하도록 한다. svg파일들에 쓰인 컬러코드도 왠지 대체하기 무서워서(?) 일단 제외시켰다.

다음과 같이 내가 하드하게 컬러코드를 사용한 부분들이 변수 사용으로 바뀐 것을 확인하였다.

/* signin.css */
...
.create-account-text a {
  color: var(--primary);
  font-weight: 600;
  margin-left: 0.5rem;
}
...