CSS custom properties (ตัวแปร) คืออะไร?

Question

Accepted Answer

**CSS custom properties** (ตัวแปร) ช่วยให้คุณจัดเก็บค่าและนำมาใช้ซ้ำได้ ต่างจากตัวแปร preprocessor (Sass) พวกมันจะ **มีสัญญาณชีวิตในขณะรันไทม์** — คุณสามารถกำหนดเป็นชั้น รับมรดก และสามารถเปลี่ยนแปลงด้วย JavaScript หรือ media queries ได้

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

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

## ค่าทางเลือก

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## พวกมันจะกำหนดเป็นชั้นและสามารถกำหนดขอบเขต/ลบล้างได้

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

เนื่องจากตัวแปรจะรับมรดก ตัวแปรที่ตั้งค่าบนพ่อแม่จึงพร้อมใช้งานสำหรับสรรพชาติทั้งหมดและสามารถลบล้างได้ในต้นไม้ย่อย — สิ่งที่ตัวแปร Sass (ซึ่งถูกคอมไพล์) ไม่สามารถทำได้

## ฟีเจอร์ฆ่าเขา: theming รันไทม์

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

เปลี่ยนธีมทั้งหมดโดยกำหนดตัวแปรเพียงไม่กี่ตัวใหม่ — ไม่มีกฎที่ซ้ำกัน คุณยังสามารถทำได้ใน JS:

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

สิ่งนี้จะอัปเดตทุกองค์ประกอบที่ใช้ตัวแปรนั้นทันที — เป็นไปไม่ได้กับตัวแปร Sass ที่คอมไพล์แล้ว

## เหตุใดจึงสำคัญ

CSS custom properties เป็นรากฐานของ **theming และ design tokens** สมัยใหม่: กำหนดสี/ระยะห่างครั้งเดียว นำมาใช้ซ้ำทุกที่ และเปลี่ยนธีม (โหมดมืด บริหารเว็บไซต์ต่างๆ) ในรันไทม์ผ่าน media queries หรือ JavaScript

พวกมันนำ DRY และค่าแบบไดนามิกมาสู่ CSS ธรรมดา — ไม่จำเป็นต้องมีขั้นตอนการสร้าง