CSS কাস্টম প্রপার্টিজ (ভেরিয়েবল) কী?

Question

Accepted Answer

**CSS কাস্টম প্রপার্টিজ** (ভেরিয়েবল) আপনাকে মানগুলি একবার সংরক্ষণ করতে এবং পুনরায় ব্যবহার করতে দেয়। প্রিপ্রসেসর (Sass) ভেরিয়েবলগুলির বিপরীতে, এগুলি **রানটাইমে লাইভ** — তারা ক্যাসকেড করে, উত্তরাধিকার পায় এবং JavaScript বা মিডিয়া কোয়েরির মাধ্যমে পরিবর্তন করা যায়।

```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 ভেরিয়েবল (যা কম্পাইল করা হয়) করতে পারে না।

## প্রধান বৈশিষ্ট্য: রানটাইম থিমিং

```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 ভেরিয়েবল আধুনিক **থিমিং এবং ডিজাইন টোকেনগুলির** ভিত্তি: একবার রঙ/স্পেসিং সংজ্ঞায়িত করুন, সর্বত্র পুনরায় ব্যবহার করুন এবং মিডিয়া কোয়েরি বা JavaScript এর মাধ্যমে রানটাইমে থিম (ডার্ক মোড, ব্র্যান্ড ভেরিয়েন্ট) সুইচ করুন।

তারা DRY এবং গতিশীল মান সাধারণ CSS-এ নিয়ে আসে — কোনো বিল্ড ধাপের প্রয়োজন নেই।