CSS 커스텀 속성(변수)이란 무엇인가요?

Question

Accepted Answer

**CSS 커스텀 속성**(변수)은 값을 한 번 저장해 재사용하게 해줍니다. 전처리기(Sass) 변수와 달리, **런타임에 살아 있습니다** — cascade하고, 상속되며, JavaScript나 미디어 쿼리로 변경할 수 있습니다.

```css
:root {                 /* :root = html 요소 → 전역 스코프 */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* var()로 사용 */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## 대체 값

```css
color: var(--text-color, black); /* --text-color가 정의되지 않으면 black 사용 */
```

## cascade하고 스코프 지정/덮어쓰기 가능

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* 로컬에서 덮어씀 — var()를 쓰는 자식이 업데이트됨 */
```

상속되기 때문에, 부모에 설정된 변수는 모든 자손에서 사용 가능하고 하위 트리에서 덮어쓸 수 있습니다 — 컴파일되어 사라지는 Sass 변수로는 할 수 없는 일입니다.

## 핵심 기능: 런타임 테마화

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* 다크 모드를 위해 같은 변수를 재정의 */
}
body { background: var(--bg); color: var(--text); }
```

몇 개의 변수를 재정의하는 것만으로 전체 테마를 전환합니다 — 중복 규칙이 없습니다. JS에서도 할 수 있습니다.

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

이는 그 변수를 쓰는 모든 요소를 즉시 업데이트합니다 — 컴파일된 Sass 변수로는 불가능합니다.

## 왜 중요한가

CSS 변수는 최신 **테마화와 디자인 토큰**의 기초입니다: 색상/spacing을 한 번 정의해 어디서나 재사용하고, 미디어 쿼리나 JavaScript를 통해 런타임에 테마(다크 모드, 브랜드 변형)를 전환합니다.

이들은 빌드 단계 없이 일반 CSS에 DRY하고 동적인 값을 가져옵니다.