একটি CSS variable (আনুষ্ঠানিকভাবে custom property বলা হয়) একটি মান — একটি রং, একটি spacing size, একটি font — একবার define করতে দেয় আর পুরো stylesheet জুড়ে reuse করতে দেয়, একটি জায়গা থেকেই সবখানে আপডেট করা যায়।
একটি variable নাম সবসময় দুটি dash দিয়ে শুরু হয়। :root-এ এটা define করলে পেজের সবখানে উপলব্ধ হয়।
:root {
--brand-color: #3366ff;
--spacing-unit: 8px;
--font-heading: 'Poppins', sans-serif;
}.button {
background-color: var(--brand-color);
padding: var(--spacing-unit);
}
h1 {
font-family: var(--font-heading);
}var() একটি দ্বিতীয় argument accept করে — variable define না থাকলে ব্যবহৃত হয়।
.button {
color: var(--text-color, black);
}:root-এর বদলে একটি নির্দিষ্ট selector-এর ভেতরে define করা একটি variable শুধু সেই এলিমেন্ট আর এর child-দের ভেতরে উপলব্ধ।
.dark-card {
--card-bg: #1a1a1a;
--card-text: white;
background-color: var(--card-bg);
color: var(--card-text);
}একটি Sass variable-এর মতো না, একটি CSS custom property ব্রাউজারে live — এটা JavaScript দিয়ে পড়া আর বদলানো যায়, আর কোনো rebuild step ছাড়াই একটি media query বা একটি class toggle-এ তাৎক্ষণিকভাবে সাড়া দেয়।
document.documentElement.style.setProperty('--brand-color', '#ff3366')একটি practical pattern
একটি সাধারণ আসল ব্যবহার: :root-এ একবার রং আর spacing variable define করুন, তারপর প্রতিটি rule duplicate না করে dark mode বানাতে একটি .dark-theme class-এর ভেতরে হাতেগোনা কয়েকটা override করুন।