Variables and Custom Properties

CSS Variables와 Custom Properties는 코드 재사용성과 유지보수를 향상시켜, 스타일을 보다 효율적으로 관리할 수 있다. 

---

1. CSS Variables (Custom Properties)란?

CSS Variables는 재사용 가능한 값을 정의하는 사용자 지정 속성이다. 전역 또는 지역 범위에서 적용 가능하며, var() 함수로 참조할 수 있다.

문법

:root {
  --variable-name: value;
}

 

• --variable-name: 변수 이름 (반드시 --로 시작).
• value: 변수 값.

---

2. 주요 특징

1. 동적 업데이트 : CSS 변수는 JavaScript를 통해 동적으로 변경할 수 있다.
2. Cascading (상속 가능) : CSS의 계층 구조를 따르며 하위 요소가 부모 요소에서 정의한 변수를 상속받는다.
3. 범위 지정 가능 : 전역 또는 특정 요소에만 적용 가능.
4. 반복 줄이기 : 동일한 값을 여러 곳에서 사용할 수 있어 유지보수가 쉬워짐.

---

3. 기본 사용법

전역 변수 정의

:root {
  --main-color: #3498db;
  --padding: 10px;
}

 

변수 참조

button {
  background-color: var(--main-color);
  padding: var(--padding);
}

지역 변수 정의

.container {
  --main-color: #e74c3c;
}

.container button {
  background-color: var(--main-color);
}

 

• :root에서 선언된 변수는 전역적으로 적용되지만, 특정 요소 내에서 재정의할 수 있다.

---

4. 기본값 제공

var() 함수는 두 번째 매개변수로 기본값을 설정할 수 있다.

button {
  background-color: var(--secondary-color, #95a5a6);
}

• --secondary-color가 정의되지 않은 경우 #95a5a6가 사용된다.

---

5. 주의사항

1. 호환성
   • IE는 CSS Variables를 지원하지 않음.
   • 필요하면 CSS Polyfill을 사용할 수 있음.
2. 디버깅
   • 잘못된 변수를 참조하면 var(--unknown-variable) 대신 기본값이나 빈 값이 반환됨.
   • 브라우저 개발자 도구에서 확인 가능.