CSS custom properties (variables) là gì?

Question

Accepted Answer

**CSS custom properties** (biến) cho phép bạn lưu giá trị một lần và tái sử dụng. Khác với biến của preprocessor (Sass), chúng **sống động tại runtime** — chúng cascade, kế thừa, và có thể được thay đổi bằng JavaScript hoặc media query.

```css
:root {                 /* :root = phần tử html → phạm vi toàn cục */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* dùng với var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Giá trị fallback

```css
color: var(--text-color, black); /* dùng black nếu --text-color chưa được định nghĩa */
```

## Chúng cascade và có thể được scope/ghi đè

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* ghi đè cục bộ — phần con dùng var() sẽ cập nhật */
```

Vì chúng kế thừa, một biến đặt trên một phần tử cha sẽ khả dụng cho mọi phần tử con và có thể được ghi đè trên một nhánh con — điều mà biến Sass (vốn được biên dịch mất đi) không làm được.

## Tính năng đột phá: theming tại runtime

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* định nghĩa lại CÙNG biến cho dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Chuyển toàn bộ một theme bằng cách định nghĩa lại một vài biến — không lặp lại rule. Bạn cũng có thể làm trong JS:

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

Điều này cập nhật ngay lập tức mọi phần tử dùng biến đó — không thể làm được với biến Sass đã biên dịch.

## Tại sao điều này quan trọng

CSS variable là nền tảng của **theming và design token** hiện đại: định nghĩa màu/spacing một lần, tái sử dụng khắp nơi, và chuyển theme (dark mode, biến thể thương hiệu) tại runtime qua media query hoặc JavaScript.

Chúng mang giá trị động, DRY vào CSS thuần — không cần bước build.