CSS 파일 내 변수 선언 및 사용

CSS에서는 스타일시트 전체에서 특정 값을 재사용해야 하는 공통된 요구가 있습니다. 명시적인 변수 선언 구문은 없지만 이 기능을 달성하는 기술이 있습니다.

한 가지 접근 방식은 CSS 선택기와 스타일 규칙을 활용하는 것입니다. 관련 스타일을 하나의 규칙으로 결합하면 각 스타일의 범위를 명확하게 하면서 반복을 피할 수 있습니다. 예:

/* Theme color: text */
H1, P, TABLE, UL {
  color: blue;
}

/* Theme color: emphasis */
B, I, STRONG, EM {
  color: #00006F;
}

이런 방식으로 스타일을 구성하면 반복을 방지하고 어떤 문서 요소가 영향을 받는지 분명하게 알 수 있습니다.

그러나 두 속성이 동일한 값을 공유하더라도 그 의미는 다를 수 있습니다. 따라서 스타일 반복을 고려할 때 현재 값보다 문맥상의 의미를 우선시하세요. 이 접근 방식은 유연성을 보장하고 향후 스타일 업데이트 시 오류 위험을 줄여줍니다.