14. CSS Variables (Custom Properties)
📘 কনসেপ্ট (থিওরি)
CSS ভেরিয়েবল (Custom Properties) আপনাকে মান সংরক্ষণ করে পুরো স্টাইলশিটে পুনরায় ব্যবহার করতে দেয়। এটি কোড রক্ষণাবেক্ষণ ও আপডেট সহজ করে।
**ভেরিয়েবল ডিফাইন করা** (সাধারণত
:root এ):
:root {
--primary: #38bdf8;
--bg-dark: #0f172a;
--radius: 12px;
}
**ভেরিয়েবল ব্যবহার করা:**
.card {
background: var(--bg-dark);
border-radius: var(--radius);
color: var(--primary);
}
**সুবিধা:**
- এক জায়গায় রঙ পরিবর্তন করলে সব জায়গায় আপডেট হয়
- সহজ থিমিং (লাইট/ডার্ক মোড)
- স্ব-ব্যাখ্যাকারী কোড
- JavaScript দিয়ে ডায়নামিক থিমিং সম্ভব
💡 উদাহরণ
CSS ভেরিয়েবল দিয়ে থিম:
CSS ভেরিয়েবল!
এই কার্ডটি সহজ থিমিংয়ের জন্য CSS custom properties ব্যবহার করে।
🎯 আপনার কাজ (প্র্যাকটিস)
প্রাইমারি কালার, ব্যাকগ্রাউন্ড এবং বর্ডার-রেডিয়াসের জন্য CSS ভেরিয়েবল ডিফাইন করুন। ২টি কার্ড স্টাইল করতে ব্যবহার করুন।
main.css
Loading...
OUTPUT
Run your code to see the output here...