CSS కస్టమ్ ప్రాపర్టీస్ (వేరియబుల్లు) మీరు విలువలను ఒకసారి నిల్వ చేసి పునः ఉపయోగించుకోవడానికి అనుమతిస్తాయి. ప్రీప్రసెసర్ (Sass) వేరియబుల్ల వలె కాకుండా, అవి రన్టైమ్లో సక్రియం — అవి క్యాస్కేడ్ చేస్తాయి, వారసత్వం పొందుతాయి మరియు JavaScript లేదా మీడియా ప్రశ్నల ద్వారా మార్చబడతాయి.
{
: ;
: ;
: ;
}
{
: (--color-primary);
: (--spacing);
: (--radius);
}
color: var(--text-color, black); /* use black if --text-color isn't defined */
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
వారసత్వం కారణంగా, పేరెంట్పై సెట్ చేయబడిన వేరియబుల్ అన్ని డిసెండెంట్లకు అందుబాటులో ఉంది మరియు సబ్ట్రీపై ఓవర్రైడ్ చేయబడవచ్చు — Sass వేరియబుల్లు (సంకలితం చేయబడినవి) చేయలేని విషయం.
: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 లో కూడా దీన్ని చేయవచ్చు:
document.documentElement.style.setProperty("--color-primary", "#e11d48");
ఇది ఆ వేరియబుల్ను ఉపయోగించే ప్రతి మూలకాన్ని తక్షణమే అప్డేట్ చేస్తుంది — సంకలితం చేయబడిన Sass వేరియబుల్లతో అసాధ్యం.
CSS వేరియబుల్లు ఆధుনిక థీమింగ్ మరియు డిజైన్ టోకన్ల ఆధారం: రంగులు/ఖాళీలను ఒకసారి నిర్వచించండి, ప్రతిచోటా పునः ఉపయోగించండి మరియు మీడియా ప్రశ్నలు లేదా JavaScriptের ద్వారా రన్టైమ్లో థీమ్లను (డార్క్ మోడ్, బ్రాండ్ వేరియంట్లు) మార్చండి.
వారు DRY మరియు డైనమిక్ విలువలను సాధారణ CSS కు తీసుకువస్తారు — బిల్డ్ స్టెప్ అవసరం లేదు.