CSS에서 변수를 사용하여 코드를 더 효율적으로 작성하는 방법에 대해 알아보겠습니다.

변수 선언

CSS 변수를 사용하려면 --으로 시작하는 이름을 선택하고, 그 다음에 변수를 할당할 값을 지정합니다.

:root {
  --main-color: #ff0000;
}

위의 예제에서 --main-color는 변수를 선언한 것이며, #ff0000은 해당 변수에 할당된 값입니다.

변수 사용

선언된 변수를 사용하려면 var() 함수를 사용합니다.

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

위의 코드에서 var(--main-color)는 --main-color 변수에 할당된 값인 #ff0000을 나타냅니다.

변수 재할당

CSS 변수는 재할당이 가능합니다.

:root {
  --main-color: #ff0000;
}

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

:root {
  --main-color: #00ff00;
}

위의 코드에서 --main-color 변수가 초기에는 #ff0000으로 선언되었지만, 이후에 #00ff00으로 재할당되었습니다.

CSS 속성 변수를 사용하여 코드를 조직화하고, 유지보수성을 높일 수 있습니다. 변수는 일관된 디자인을 적용하고 코드를 재사용하기 쉽게 만들어줍니다.

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.