CSS 변수는 코드의 재사용성을 높이고 유지보수를 간편하게 만드는데 도움이 되는 강력한 도구입니다. CSS 변수를 사용하여 코드를 읽기 쉽게 만들고, 스타일을 일관되게 유지할 수 있습니다.

변수 선언하기

CSS 변수를 선언하는 방법은 다음과 같습니다.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

위의 예시에서 :root 선택자는 문서 트리의 루트 요소를 가리킵니다. --primary-color와 --secondary-color는 변수명이고, 각각의 값은 색상 코드입니다.

변수 사용하기

변수를 사용하여 스타일 속성에 값을 할당할 수 있습니다.

.element {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

위의 예시에서 var(--primary-color)는 --primary-color 변수의 값인 #3498db으로 치환됩니다.

변수 고정값 사용하기

변수를 선언할 때 고정값을 설정할 수도 있습니다.

:root {
  --max-width: 960px;
}

.container {
  max-width: var(--max-width);
}

위의 예시에서 --max-width 변수는 960px로 고정되어 있어, container 클래스의 max-width 값이 960px으로 정해집니다.

요약

CSS 변수는 코드를 더 읽기 쉽게 만들어주고, 스타일을 일관되게 유지하는 것을 도와줍니다. 변수를 사용하여 스타일을 정의하고, 재사용성을 높이는 것은 효율적인 개발 방법이 될 수 있습니다.

더 많은 정보를 원하시면 MDN web docs를 참고하세요.