CSS Variables (ตัวแปรใน CSS)

ตัวแปร CSS (CSS Variables) หรือที่เรียกว่า CSS Custom Properties ช่วยให้เราสามารถเก็บค่าต่างๆ ไว้ในตัวแปรและนำกลับมาใช้ซ้ำได้ทั่วทั้ง stylesheet ช่วยให้การจัดการสไตล์เป็นระบบและปรับแต่งได้ง่ายขึ้น

Basic Usage (การใช้งานพื้นฐาน)

การประกาศและใช้งานตัวแปร CSS ทำได้โดยใช้ -- นำหน้า ชื่อตัวแปร และเรียกใช้ด้วยฟังก์ชัน var()

/* ประกาศตัวแปรใน :root เพื่อให้ใช้ได้ทั่วทั้งหน้าเว็บ */
:root {
  --primary-color: #3498db;
  --spacing: 1rem;
  --border-radius: 4px;
}

/* การใช้งานตัวแปร */
.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}

Fallback Values (ค่าสำรอง)

เราสามารถกำหนดค่า default ให้กับ var() ได้ในกรณีที่ตัวแปรนั้นไม่มีค่า

.element {
  /* ถ้า --accent-color ไม่มีค่า จะใช้ #f0f0f0 แทน */
  color: var(--accent-color, #f0f0f0);
}

Scoping (ขอบเขตการใช้งาน)

ตัวแปร CSS มีการสืบทอดค่า (inheritance) เหมือนกับ property อื่นๆ

:root {
  --text-color: #333; /* ใช้ได้ทั่วทั้งเอกสาร */
}

.dark-theme {
  --text-color: #fff; /* ใช้ได้เฉพาะใน element ที่มี class dark-theme */
  --bg-color: #1a1a1a;
}

body {
  color: var(--text-color);
  background-color: var(--bg-color, #fff);
}

Dynamic Updates with JavaScript (อัปเดตค่าด้วย JavaScript)

เราสามารถเปลี่ยนแปลงค่าตัวแปร CSS ได้ผ่าน JavaScript

// เปลี่ยนค่าตัวแปร
const root = document.documentElement;
root.style.setProperty("--primary-color", "#e74c3c");

// อ่านค่าตัวแปร
const primaryColor = getComputedStyle(root).getPropertyValue("--primary-color");

Practical Example (ตัวอย่างการใช้งานจริง)

<div class="theme-switcher">
  <button data-theme="light">Light</button>
  <button data-theme="dark">Dark</button>
  <button data-theme="blue">Blue</button>
</div>

<div class="card">
  <h3>Card Title</h3>
  <p>This is a card with theme switching</p>
</div>

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f8f9fa;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --card-bg: #2d2d2d;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="blue"] {
  --bg-color: #e6f2ff;
  --text-color: #003366;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  margin: 1rem;
  max-width: 400px;
}

document.querySelectorAll(".theme-switcher button").forEach(button => {
  button.addEventListener("click", (e) => {
    const theme = e.target.dataset.theme;
    document.documentElement.setAttribute("data-theme", theme);
  });
});

Best Practices (แนวทางที่ดีที่สุด)

1. ใช้ :root สำหรับตัวแปรที่ใช้ทั่วทั้งโปรเจค
2. ตั้งชื่อตัวแปรให้สื่อความหมาย
3. ใช้ kebab-case ในการตั้งชื่อตัวแปร (เช่น --primary-color)
4. กำหนดค่า default เสมอเมื่อใช้ var()
5. ใช้ CSS Custom Properties สำหรับ theme และ configuration

หมายเหตุ

• ตัวแปร CSS มี case-sensitive ต้องระวังเรื่องตัวพิมพ์เล็ก-ใหญ่
• สามารถใช้กับ media queries ได้
• ใช้ร่วมกับ calc() เพื่อคำนวณค่าได้ เช่น: width: calc(var(--width) * 2)
• ตัวแปรจะถูกประมวลผลใน runtime ทำให้สามารถเปลี่ยนแปลงค่าได้ตลอดเวลา