CSS Variables

တစ်နေရာတည်း ပြင်၊ အကုန်ပြောင်း

ဥပမာ ခင်ဗျားက Website တစ်ခုလုံးမှာ သုံးထားတဲ့ အဓိက အရောင် (Theme Color) ကို ပြောင်းချင်တယ် ဆိုပါစို့။ အရင်လိုဆိုရင် Code တွေ နေရာတိုင်းမှာ လိုက်ပြီး တစ်ခုချင်းစီ ပြင်နေရမှာပါ။ အဲဒီလို မလုပ်တော့ဘဲ၊ အဲဒီအရောင်ကို Variable လေးတစ်ခုထဲမှာ အသေ သိမ်းထားလိုက်မယ်။ ပြီးတော့မှ အရောင်ပြောင်းချင်ရင် အဲဒီ Variable လေးကိုပဲ လာပြင်လိုက်တာနဲ့ တစ် Website လုံးက အရောင်တွေ အကုန် လိုက်ပြောင်းသွားမှာ ဖြစ်ပါတယ် ခင်ဗျာ။

ကြေညာခြင်း

CSS မှာ Variable တွေကို ကြေညာမယ်ဆိုရင် အရှေ့ကနေ -- (Dash နှစ်ခု) ခံပြီး ကိုယ်ပေးချင်တဲ့ နာမည်ကို ပေးလို့ရပါတယ်။ များသောအားဖြင့် အဲဒီ Variable တွေကို :root (HTML Document တစ်ခုလုံးနဲ့ သက်ဆိုင်တဲ့ နေရာ) မှာ ကြေညာလေ့ ရှိပါတယ်။

:root {
  --primary-color: #007bff; /* အဓိက အပြာရောင် */
  --text-color: #333;
  --spacing-md: 16px;
}

ပြန်သုံးခြင်း

ကြေညာထားတဲ့ Variable တွေကို ပြန်သုံးချင်တဲ့အခါမှာတော့ var() ဆိုတဲ့ Function လေးကို အသုံးပြုပြီး ပြန်ခေါ်ပေးရပါတယ်။

button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-md);
}

h1 {
  color: var(--primary-color); /* ဒီမှာလည်း အပြာရောင်ပဲ သုံးထားတယ် */
}

ဘာလို့ သုံးသင့်လဲ?

1. Maintainability: နောက်ပိုင်း Code တွေ ပြန်ပြင်ရတာ အရမ်း လွယ်ကူသွားပါတယ်။ (အထူးသဖြင့် Website ကို Dark Mode လုပ်ချင်တဲ့ အခါမျိုးမှာ အရမ်းကို အသုံးဝင်ပါတယ်)
2. Readability: Code ဖတ်ရတာ ပိုရှင်းသွားပါတယ်။ ဥပမာ #007bff ဆိုတဲ့ အရောင်ကုဒ်ကြီးကို မြင်နေရတာထက်၊ --primary-color လို့ နာမည်လေးနဲ့ မြင်ရတာက ဘာအတွက် သုံးထားတာလဲ ဆိုတာကို ချက်ချင်း နားလည်ရ ပိုလွယ်ကူစေပါတယ် ခင်ဗျာ။

Tip

Dark Mode ဥပမာ:

:root {
  --bg-color: white;
  --text-color: black;
}

/* Dark theme class ထည့်လိုက်ရင် တန်ဖိုးတွေ ပြောင်းသွားမယ် */
body.dark {
  --bg-color: black;
  --text-color: white;
}

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