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

ตัวแปรใน CSS คืออะไร?

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

ไวยากรณ์ (Syntax)

:root {
  --variable-name: value;
}

selector {
  property: var(--variable-name);
}

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการประกาศตัวแปรสีพื้นหลังและสีข้อความใน :root แล้วนำไปใช้กับองค์ประกอบ #demo

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --my-bg-color: blue;
      --my-color: white;
    }
    #demo {
      background-color: var(--my-bg-color);
      color: var(--my-color);
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1>หัวข้อตัวอย่าง</h1>
  <div id="demo">
    นี่คือข้อความตัวอย่าง นี่คือข้อความตัวอย่าง นี่คือข้อความตัวอย่าง
    นี่คือข้อความตัวอย่าง นี่คือข้อความตัวอย่าง นี่คือข้อความตัวอย่าง
  </div>
</body>
</html>

ข้อดีของการใช้ CSS Variables

• การบำรุงรักษาง่าย: เปลี่ยนค่าที่เดียว จะส่งผลทั่วทั้งเว็บไซต์
• อ่านง่าย: ชื่อตัวแปรที่มีความหมายช่วยให้โค้ดเข้าใจง่ายขึ้น
• Dynamic: สามารถเปลี่ยนค่าผ่าน JavaScript ได้
• Scope: สามารถกำหนดขอบเขตการใช้งานได้ (global หรือ local)

การใช้งานกับ JavaScript

// อ่านค่าตัวแปร
const rootStyles = getComputedStyle(document.documentElement);
const bgColor = rootStyles.getPropertyValue('--my-bg-color');

// เปลี่ยนค่าตัวแปร
document.documentElement.style.setProperty('--my-bg-color', 'red');

คำแนะนำ

• ใช้ :root สำหรับตัวแปรระดับ global
• ตั้งชื่อตัวแปรให้สื่อความหมาย เช่น --primary-color, --spacing-lg
• ใช้ var(--name, fallback) เพื่อกำหนดค่า fallback เมื่อตัวแปรไม่มีค่า