🔖 সিএসএস ভেরিয়েবল (CSS Variables)

প্রোগ্রামিং ভাষার মতো CSS-এও এখন ভেরিয়েবল ব্যবহার করা যায়! এদেরকে অফিশিয়ালি CSS Custom Properties বলা হয়। এগুলো বড় প্রোজেক্টের কালার স্কিম এবং থিমিং (যেমন: ডার্ক মোড) এর জন্য লাইফসেভার! 🛟

📌 ভেরিয়েবল ডিক্লেয়ার করা

ভেরিয়েবলের নাম সবসময় ডাবল হাইফেন (--) দিয়ে শুরু করতে হয়। সাধারণত এগুলোকে :root এর ভেতর রাখা হয়, যাতে পুরো ওয়েবসাইটের যেকোনো জায়গা থেকে এদের ব্যবহার করা যায়।

:root {
  --primary-color: #4A90D9;
  --secondary-color: #2ECC71;
  --text-dark: #333333;
  --bg-light: #F9F9F9;
  --spacing-md: 16px;
}

📌 ভেরিয়েবল ব্যবহার করা

ভেরিয়েবল কল করার জন্য var() ফাংশন ব্যবহার করা হয়।

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

📌 🥷 নিঞ্জা টেকনিক: ইজি ডার্ক মোড (Dark Mode) 🌙

CSS ভেরিয়েবলের সবচেয়ে বড় জাদুকরী ব্যবহার হলো ডার্ক মোড ইমপ্লিমেন্ট করা!

শুধু একটি নতুন ক্লাস .dark-theme তৈরি করে সেখানে ভেরিয়েবলগুলোর ভ্যালু ওভাররাইড (Override) করলেই পুরো সাইটের কালার এক সেকেন্ডে চেঞ্জ হয়ে যাবে! 🤯

/* ডিফল্ট (লাইট মোড) */
:root {
  --bg-color: #ffffff;
  --text-color: #111111;
  --btn-bg: #blue;
}
 
/* ডার্ক মোডের ওভাররাইড! */
.dark-theme {
  --bg-color: #111111;      /* ব্যাকগ্রাউন্ড কালো */
  --text-color: #ffffff;    /* টেক্সট সাদা */
  --btn-bg: #lightblue;
}
 
/* এলিমেন্টের ডিজাইন (এটি আর হাত দিতে হবে না!) */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}