CSS 변수(Custom Properties)는 CSS에서 값을 재사용 가능한 변수로 정의하는 기능이다. --변수명 형식으로 정의하고 var() 함수로 참조하며, JavaScript에서 동적으로 변경할 수 있다.
기본 문법
css
/* :root에 전역 변수 정의 */
:root {
--primary-color: #3b82f6;
--secondary-color: #64748b;
--font-size-base: 16px;
--spacing-md: 1rem;
--border-radius: 0.5rem;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* 사용 */
.button {
background-color: var(--primary-color);
padding: var(--spacing-md);
border-radius: var(--border-radius);
/* 폴백 값 제공 */
color: var(--text-color, #000000);
}
/* 지역 변수 (컴포넌트 스코프) */
.card {
--card-padding: 1.5rem;
padding: var(--card-padding);
}
.card--compact {
--card-padding: 0.75rem; /* 재정의 */
}
다크 모드 구현
css
:root {
--bg: #ffffff;
--text: #1a1a1a;
--surface: #f5f5f5;
}
[data-theme="dark"] {
--bg: #1a1a1a;
--text: #ffffff;
--surface: #2a2a2a;
}
body {
background: var(--bg);
color: var(--text);
}
JavaScript로 동적 변경
javascript
// 변수 읽기
const root = document.documentElement;
const primary = getComputedStyle(root).getPropertyValue('--primary-color');
// 변수 변경
root.style.setProperty('--primary-color', '#ef4444');
// 테마 토글
function toggleTheme() {
const isDark = document.documentElement.dataset.theme === 'dark';
document.documentElement.dataset.theme = isDark ? 'light' : 'dark';
}
계산과 조합
css
:root {
--base-size: 4px;
--spacing-1: calc(var(--base-size) * 1); /* 4px */
--spacing-2: calc(var(--base-size) * 2); /* 8px */
--spacing-4: calc(var(--base-size) * 4); /* 16px */
--spacing-8: calc(var(--base-size) * 8); /* 32px */
}
SASS 변수와 비교
| 항목 | CSS 변수 | SASS 변수 |
|---|
| 런타임 변경 | 가능 | 불가 (컴파일 시) |
| JS 접근 | 가능 | 불가 |
| 캐스케이딩 | 상속됨 | 정적 |
| 브라우저 지원 | 모던 브라우저 | 컴파일 후 전체 |
관련 개념
