हिन्दी

English
Español
Português
中文
日本語
한국어

हिन्दी

English
Español
Português
中文
日本語
한국어

Appearance

Interactive coursesLearn by building 🚀 Hundreds of hours of interactive lessons, coding challenges, and projects across web, Python, and AI. Pause, tweak the code, and build along in the browser. See all courses
This page has been auto-translated and may contain errors.View in English

कस्टम प्रॉपर्टीज़ और आधुनिक CSS ​

docs.scrimba.com

आप एक ब्रैंड नीला चुनते हैं, इसे चालीस अलग-अलग नियमों में टाइप करते हैं, और साइट को शिप करते हैं। एक महीने बाद मार्केटिंग थोड़ा अलग नीला चाहती है। अब आप हर स्टाइलशीट को खोज रहे हैं, आशा कर रहे हैं कि आप सभी चालीस को पकड़ें और दो को मिस न करें जो बड़े अक्षर से लिखे गए थे। कस्टम प्रॉपर्टीज़ इसे ठीक करती हैं: आप रंग का नाम एक बार रखते हैं, नाम को हर जगह उपयोग करते हैं, और इसे एक जगह बदलते हैं। यह एकल आदत थीमिंग, डिज़ाइन टोकन, और स्टाइलशीट की शुरुआत है जो एक रीडिज़ाइन से बचती हैं।

एक वेरिएबल की घोषणा और उपयोग ​

एक कस्टम प्रॉपर्टी एक मान है जिसे आप एक नाम देते हैं ताकि आप इसे पुनः उपयोग कर सकें। आप नाम को दो डैश के साथ लिखते हैं, इसे एक मान पर सेट करते हैं, और बाद में var() के साथ इसे वापस पढ़ते हैं:

css
:root {
  --color-brand: #2563eb;   /* मान को एक बार घोषित करें, एक नाम के तहत */
}

.button {
  background: var(--color-brand);   /* इसे यहां वापस पढ़ें */
}

.link {
  color: var(--color-brand);        /* और यहां, समान मान */
}

--color-brand नाम है (दो डैश आवश्यक हैं), और var(--color-brand) यह है कि आप इसे कैसे उपयोग करते हैं। इसे :root पर घोषित करना (जो <html> तत्व है, पृष्ठ के शीर्ष पर) नाम को हर जगह उपलब्ध करता है। :root पर एक पंक्ति बदलें और हर नियम जो इसे पढ़ता है वह अपडेट हो जाता है।

एक कस्टम प्रॉपर्टी एक नामित मान है जिसे आप -- प्रीफिक्स के साथ घोषित करते हैं और var() फंक्शन के साथ वापस पढ़ते हैं। लोग इन्हें CSS वेरिएबल भी कहते हैं, और दोनों नाम एक ही चीज़ का मतलब रखते हैं:

css
:root {
  --color-brand: #2563eb;
  --color-brand-dark: #1e40af;
}

.button {
  background: var(--color-brand);
}

.button:hover {
  background: var(--color-brand-dark);
}

-- प्रीफिक्स वह है जो एक कस्टम प्रॉपर्टी को एक सामान्य प्रॉपर्टी से अलग करता है, और यह केस-सेंसिटिव है, इसलिए --color-Brand और --color-brand दो अलग-अलग नाम हैं। :root पर घोषित करना सामान्य विकल्प है क्योंकि यह मान को पेड़ के शीर्ष पर रखता है जहां हर तत्व इसे देख सकता है, जहां आपके वैश्विक टोकन हैं। आप रंगों तक सीमित नहीं हैं: कोई भी मान जो एक प्रॉपर्टी स्वीकार करता है एक कस्टम प्रॉपर्टी में रह सकता है, लंबाई, छाया और फॉन्ट स्टैक सहित।

एक कस्टम प्रॉपर्टी एक उपयोगकर्ता-परिभाषित प्रॉपर्टी है जिसका नाम -- से शुरू होता है, एक मान रखता है जिसे आप var() फंक्शन के माध्यम से वापस पढ़ते हैं। नाम केस-सेंसिटिव है और मान लगभग शब्दशः संग्रहित होता है: ब्राउज़र घोषणा के समय इसके साथ बहुत कम करता है, जो एक बार महत्वपूर्ण हो जाता है जब आप देखते हैं कि यह वास्तव में कहां हल होता है।

css
:root {
  --color-brand: #2563eb;
  --space-md: 16px;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.12);
}

.card {
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

:root पर घोषित करना एक परंपरा है, आवश्यकता नहीं। :root <html> तत्व को html प्रकार चयनकर्ता से थोड़ी अधिक विशिष्टता के साथ मेल खाता है, और क्योंकि कस्टम प्रॉपर्टीज़ इनहेरिट करती हैं, एक मान वहां सेट किया गया पूरे दस्तावेज़ के लिए दृश्यमान है। यह मानसिक मॉडल है जिसे रखना है: आप एक वैश्विक रजिस्ट्री नहीं बना रहे हैं, आप रूट तत्व पर एक प्रॉपर्टी सेट कर रहे हैं जो पूरे दस्तावेज़ को इनहेरिट करता है। कोई भी सामान्य प्रॉपर्टी स्वीकार करता है संग्रहीत किया जा सकता है, और आप मानों के टुकड़े भी संग्रहीत करेंगे (एक रंग चैनल, एक इकाई रहित संख्या) और बाद में उन्हें असेंबल करेंगे।

Junoएक वेरिएबल की घोषणा और उपयोग एक कस्टम प्रॉपर्टी एक मान के साथ एक नाम है: इसे दो डैश के साथ लिखें जैसे --color-brand, फिर var(--color-brand) के साथ इसे पढ़ें। इसे :root पर रखें ताकि पूरा पृष्ठ इसका उपयोग कर सके। एक पंक्ति बदलें और हर नियम जो नाम को पढ़ता है वह इसके साथ अपडेट होता है।
Junoएक वेरिएबल की घोषणा और उपयोग-- प्रीफिक्स एक कस्टम प्रॉपर्टी को चिह्नित करता है, और var() इसे वापस पढ़ता है। :root पर घोषित करना आपके वैश्विक टोकन को पेड़ के शीर्ष पर रखता है जहां हर तत्व उन तक पहुंच सकता है। नाम केस-सेंसिटिव हैं, और कोई भी मान जो एक प्रॉपर्टी स्वीकार करता है एक में रह सकता है, केवल रंग नहीं।
Junoएक वेरिएबल की घोषणा और उपयोग एक कस्टम प्रॉपर्टी कोई भी --name है जिसे आप सेट करते हैं, var() के माध्यम से वापस पढ़ते हैं, लगभग शब्दशः संग्रहित किया जाता है जब तक यह हल नहीं होता। :root एक परंपरा है: यह <html> तत्व है, और क्योंकि ये प्रॉपर्टीज़ इनहेरिट करती हैं, एक मान वहां हर वंशज तक पहुंचता है। आप आंशिक मानों को भी संग्रहित कर सकते हैं और बाद में उन्हें असेंबल कर सकते हैं, जो फॉलबैक अनुभाग उपयोग करना शुरू करता है।

वे कैस्केड और इनहेरिट करते हैं ​

यदि आपने किसी अन्य भाषा में वेरिएबल का उपयोग किया है, तो यह अगला भाग आश्चर्य है: एक कस्टम प्रॉपर्टी निश्चित नहीं है। यह किसी भी अन्य CSS प्रॉपर्टी के समान नियमों का पालन करता है, जिसका अर्थ है कि यह इनहेरिट करता है बाल तत्वों में, और आप बाकी को छुए बिना एक जगह इसे एक अलग मान दे सकते हैं।

css
:root {
  --color-text: #1f2937;   /* पूरे पृष्ठ के लिए डिफ़ॉल्ट */
}

.callout {
  --color-text: #92400e;   /* एक अलग मान, केवल .callout के अंदर */
  color: var(--color-text);
}

p {
  color: var(--color-text);   /* आमतौर पर गहरा भूरा, कॉलआउट के अंदर एम्बर */
}

समान var(--color-text) आपको अधिकांश पैराग्राफ में गहरा भूरा देता है लेकिन कॉलआउट के अंदर एम्बर, क्योंकि कॉलआउट ने अपना स्वयं का मान सेट किया। यह वह है जो थीमिंग को संभव बनाता है, और आपने कैसे CSS काम करता है में इसके पीछे कैस्केड देखा है।

यह वह है जहां एक कस्टम प्रॉपर्टी Sass जैसे CSS प्रीप्रोसेसर से एक वेरिएबल से अलग हो जाता है। एक प्रीप्रोसेसर वेरिएबल ब्राउज़र इसे कभी देखने से पहले संकलित हो जाता है, इसलिए यह एक स्थिर खोज-और-प्रतिस्थापन है। एक कस्टम प्रॉपर्टी एक वास्तविक CSS प्रॉपर्टी है, ब्राउज़र में जीवंत, इसलिए यह कैस्केड का पालन करता है और यह इनहेरिट करता है।

एक कस्टम प्रॉपर्टी का मान उस तत्व पर देखा जाता है जो इसे पढ़ता है, न कि जहां इसे घोषित किया गया था। वह एकल तथ्य है कि घटक थीमिंग क्यों काम करता है:

css
:root {
  --color-accent: #2563eb;   /* डिफ़ॉल्ट रूप से हर जगह नीला */
}

.card--warning {
  --color-accent: #d97706;   /* इस घटक सबट्री के लिए ओवरराइड */
}

.card__badge {
  background: var(--color-accent);   /* नीला, या एक चेतावनी कार्ड के अंदर एम्बर */
}

बैज को पता नहीं है या परवाह नहीं करता कि --color-accent कहां से आया। यह अपने पर प्रभाव में मान को पढ़ता है, और किसी भी पूर्वज ने इसे पुनः परिभाषित किया हो सकता है। आप एक कंटेनर पर टोकन को ओवरराइड करते हैं और हर वंशज जो इसे पढ़ता है एक घटक नियम को संपादित किए बिना पुनः स्किन करता है। पूर्ण कैस्केड और इनहेरिटेंस नियम कैसे CSS काम करता है में रहते हैं।

वह व्यवहार जो कस्टम प्रॉपर्टीज़ को हर प्रीप्रोसेसर वेरिएबल से अलग करता है वह यह है कि वे कैस्केड में भाग लेते हैं और इनहेरिट करते हैं डिफ़ॉल्ट रूप से। एक Sass या Less वेरिएबल बिल्ड समय पर हल होता है और ब्राउज़र फ़ाइल लोड करने से पहले चला जाता है। एक कस्टम प्रॉपर्टी तत्व पर एक वास्तविक प्रॉपर्टी है, कैस्केड द्वारा हल किया जाता है जो color या font-size को नियंत्रित करता है, जिसका अर्थ है var() उस तत्व पर प्रॉपर्टी के कम्प्यूटेड मान के विरुद्ध देखा जाता है जो पढ़ रहा है।

css
:root {
  --color-accent: #2563eb;
}

.panel[data-tone="warning"] {
  --color-accent: #d97706;   /* सबट्री रूट पर सेट करें */
}

.panel__button {
  background: var(--color-accent);   /* तत्व के अनुसार हल होता है, पैनल से इनहेरिट करता है */
}

पकड़ने के लायक दो परिणाम। पहला, इनहेरिटेंस थीमिंग करता है: --color-accent को सबट्री रूट पर सेट करना हर वंशज तक फैलता है जो इसे पढ़ता है, इसलिए एक कंटेनर ओवरराइड पूरे घटक पेड़ को इसके नियमों में कोई बदलाव किए बिना फिर से स्किन करता है। दूसरा, विशिष्टता अभी भी जहां टोकन सेट होता है पर लागू होता है, var() पर नहीं। यदि दो चयनकर्ता दोनों समान तत्व पर --color-accent सेट करते हैं, तो सामान्य कैस्केड तय करता है कि कौन जीतता है, बिल्कुल जैसे यह किसी प्रॉपर्टी के लिए करेगा। एक प्रॉपर्टी जो इनहेरिट करना बंद करनी चाहिए initial के साथ रीसेट की जा सकती है, या @property के साथ गैर-इनहेरिटिंग के रूप में घोषित की जा सकती है, जो नीचे गहरे डाइव तक पहुंचता है। कैस्केड नियम यहां बिना अपवाद के लागू होते हैं।

Junoवे कैस्केड और इनहेरिट करते हैं एक कस्टम प्रॉपर्टी जमी हुई नहीं है: यह बाल तत्वों में इनहेरिट करता है, और आप बाकी को बदले बिना एक जगह एक अलग मान सेट कर सकते हैं। यही कारण है कि समान var(--color-text) अधिकांश पैराग्राफ में भूरा और कॉलआउट के अंदर एम्बर हो सकता है। एक कंटेनर पर नाम को पुनः परिभाषित करें और इसके अंदर सब कुछ नया मान लेता है।
Junoवे कैस्केड और इनहेरिट करते हैं Sass वेरिएबल के विपरीत जो बिल्ड समय पर गायब हो जाता है, एक कस्टम प्रॉपर्टी ब्राउज़र में जीवंत है और कैस्केड का पालन करता है, इसलिए इसका मान उस तत्व पर पढ़ा जाता है जो इसका उपयोग करता है। एक कंटेनर पर टोकन को ओवरराइड करें और हर वंशज घटक नियमों में शून्य संपादन के साथ पुनः स्किन करता है। वह लुकअप-जहां-आप-पढ़ते-हैं व्यवहार थीमिंग के पीछे पूरी चाल है।
Junoवे कैस्केड और इनहेरिट करते हैं कस्टम प्रॉपर्टीज़ इनहेरिट और कैस्केड करती हैं, जो एक प्रीप्रोसेसर वेरिएबल कभी नहीं करता क्योंकि यह ब्राउज़र लोड करने से पहले चला जाता है। var() पढ़ने वाले तत्व पर कम्प्यूटेड मान के विरुद्ध हल होता है, इसलिए सबट्री रूट पर एक टोकन सेट करना इनहेरिटेंस अकेले के माध्यम से इसके नीचे सब कुछ थीम करता है। विशिष्टता टोकन सेट होने पर शासन करता है, var() कॉल पर नहीं।

फॉलबैक और calc() ​

var() एक दूसरा मान ले सकता है, केवल तभी उपयोग किया जाता है जब कस्टम प्रॉपर्टी कभी सेट नहीं की गई थी। यह फॉलबैक है, और यह एक नियम को काम कर रहा रखता है भले ही एक टोकन गायब हो:

css
.card {
  gap: var(--gap, 1rem);   /* --gap का उपयोग करें यदि यह मौजूद है, अन्यथा 1rem */
}

आप calc() का उपयोग करके एक कस्टम प्रॉपर्टी के साथ गणित भी कर सकते हैं। यदि आपके पास एक बेस स्पेसिंग मान है, तो आप दूसरी संख्या को हार्ड-कोड करने के बजाय इससे एक बड़ा मान बना सकते हैं:

css
:root {
  --space-md: 16px;
}

.section {
  padding: calc(var(--space-md) * 2);   /* 32px, बेस से प्राप्त */
}

इस तरह मानों को प्राप्त करने का अर्थ है कि --space-md में एक परिवर्तन इसके शीर्ष पर बनाई गई हर चीज़ के माध्यम से लहरें।

var() एक दूसरा तर्क स्वीकार करता है जो फॉलबैक के रूप में कार्य करता है: var(--gap, 1rem) --gap को हल करता है यदि यह सेट है, और 1rem को यदि यह नहीं है। वह फॉलबैक किसी भी टोकन पर उपयोग के लायक है जो एक दिए गए सबट्री पर परिभाषित नहीं हो सकता है, इसलिए एक घटक अभी भी समझदारी से प्रस्तुत होता है जब इसे कहीं गिराया जाता है जहां इसके टोकन प्रदान नहीं किए गए थे।

css
.card {
  gap: var(--gap, 1rem);
  padding: var(--space-md, 16px);
}

कस्टम प्रॉपर्टीज़ calc() के साथ अपना सर्वश्रेष्ठ निकालती हैं, क्योंकि यह वह है जो आप जादू संख्याओं के एक ढेर को संग्रहीत करने के बजाय एक मान को दूसरे से कैसे प्राप्त करते हैं:

css
:root {
  --space-md: 16px;
}

.section {
  padding: calc(var(--space-md) * 2);        /* 32px */
  margin-bottom: calc(var(--space-md) * 3);  /* 48px, एक सत्य का स्रोत */
}

एक बात देखने के लिए: फॉलबैक पूर्ण मान हो सकता है जिसमें अल्पविराम शामिल हो, इसलिए var(--shadow, 0 1px 2px black) मान्य है, और पहले अल्पविराम के बाद सब कुछ फॉलबैक के रूप में माना जाता है। साइज़िंग यूनिट्स देखें कि calc() के अंदर इकाइयां कैसे हल होती हैं।

var() एक वैकल्पिक फॉलबैक अपने दूसरे तर्क के रूप में लेता है: var(--gap, 1rem) 1rem पैदा करता है जब --gap पढ़ने वाले तत्व पर सेट नहीं है (या गारंटीशुदा-अमान्य मान पर सेट है)। फॉलबैक लालची तरीके से पहले अल्पविराम के बाद सब कुछ लेता है, इसलिए यह स्वयं एक अल्पविराम युक्त मान या एक नेस्टेड var() हो सकता है, जो आपको डिफ़ॉल्ट को चेन करने देता है: var(--gap, var(--space-md, 1rem))।

css
.card {
  gap: var(--gap, var(--space-md, 1rem));   /* चेन किया गया फॉलबैक */
}

:root {
  --space-md: 16px;
}

.section {
  padding: calc(var(--space-md) * 2);   /* 32px, हार्ड-कोड नहीं किया गया */
}

calc() के साथ पेयरिंग वह है जहां कस्टम प्रॉपर्टीज़ एक स्केलिंग सिस्टम में अपनी जगह अर्जित करती हैं, और यह एक सटीकता नियम के साथ आता है। एक कस्टम प्रॉपर्टी एक इकाई रहित संख्या रख सकता है, और आप calc() के अंदर एक इकाई को गुणा करते हैं:

css
:root {
  --scale: 1.5;   /* इकाई रहित, इसलिए इसे किसी भी इकाई से गुणा किया जा सकता है */
}

.title {
  font-size: calc(1rem * var(--scale));   /* 1.5rem */
  line-height: calc(var(--scale) + 0.2);  /* शुद्ध संख्या अंकगणित */
}

आप --scale को इकाई के बिना संग्रहीत करते हैं का कारण यह है कि calc(var(--scale) * 16px) काम करता है, जबकि --scale: 1.5rem को संग्रहीत करना और calc(var(--scale) * 16px) करना दो लंबाई को गुणा करता है और अमान्य है। कच्चे अनुपात को इकाई रहित रखें और उपयोग के बिंदु पर इकाई संलग्न करें। वे इकाइयां पिक्सल के लिए कैसे हल होती हैं यह साइज़िंग यूनिट्स में शामिल है।

Junoफॉलबैक और calc()var(--gap, 1rem) मौजूद हो तो टोकन का उपयोग करता है और 1rem तक गिरता है यदि वह नहीं है, इसलिए एक नियम तब काम करता रहता है जब एक मान गायब है। और calc() आपको एक टोकन से मान बनाने देता है, जैसे calc(var(--space-md) * 2) दोगुने आधार स्पेसिंग के लिए। आधार को बदलें और इसके शीर्ष पर बनाई गई हर चीज़ अनुसरण करती है।
Junoफॉलबैक और calc()var() का दूसरा तर्क एक फॉलबैक है: var(--gap, 1rem) उस स्थिति को कवर करता है जहां टोकन कभी सेट नहीं किया गया था। कस्टम प्रॉपर्टीज़ को calc() के साथ जोड़ी जाने वाली जादू संख्याओं को हार्ड-कोड करने के बजाय मानों को प्राप्त करने के लिए, इसलिए एक टोकन पूरे स्केल को चलाता है। ध्यान दें कि फॉलबैक पहले अल्पविराम के बाद सब कुछ निगलता है, जो बहु-भाग मानों के लिए काम आता है।
Junoफॉलबैक और calc()var(--gap, 1rem) लालची तरीके से गिरता है, इसलिए आप var(--gap, var(--space-md, 1rem)) जैसे डिफ़ॉल्ट को नेस्ट कर सकते हैं। कच्चे अनुपात को इकाई रहित रखें, क्योंकि calc(var(--scale) * 16px) काम करता है जबकि दो लंबाई को गुणा करना नहीं करता है, और उपयोग के बिंदु पर इकाई संलग्न करें। यह एक टोकन को पूरे प्रकार या स्पेसिंग स्केल को चलाता रहता है।

थीमिंग ​

क्योंकि एक कस्टम प्रॉपर्टी को पेड़ के नीचे पुनः परिभाषित किया जा सकता है, आप एक क्लास के तहत टोकन बदलकर एक गहरी थीम बना सकते हैं, और हर घटक नियम को अकेला छोड़ सकते हैं:

css
:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
}

.theme-dark {
  --color-bg: #0f172a;      /* समान नाम, नए मान */
  --color-text: #e2e8f0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

पृष्ठ में class="theme-dark" जोड़ें और हर नियम जो --color-bg या --color-text को पढ़ता है गहरे मानों को हल्का करता है। आपने body नियम को कभी छुआ नहीं, या कोई घटक, थीम स्विच बनाने के लिए। यह रंग को टोकन के रूप में नाम देने के बजाय सीधे हेक्स कोड लिखने की तुलना में पेऑफ़ है।

थीमिंग कैस्केड करने वाले टोकन का सीधा पुरस्कार है। आप अपने रंगों को एक बार टोकन के रूप में परिभाषित करते हैं, हर घटक को टोकन नामों के विरुद्ध लिखते हैं, और फिर एक थीम वह है कि ये समान नाम एक क्लास या मीडिया क्वेरी के तहत एक दूसरा सेट:

css
:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-surface: #f8fafc;
}

.theme-dark {
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  --color-surface: #1e293b;
}

एक कंटेनर पर theme-dark को टॉगल करना इसके अंदर सब कुछ को फिर से स्किन करता है, क्योंकि घटक टोकन नाम पढ़ते हैं, निश्चित रंग नहीं। यही काम मीडिया क्वेरी के साथ करता है इसलिए थीम ऑपरेटिंग सिस्टम सेटिंग का अनुसरण करता है:

css
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-text: #e2e8f0;
    --color-surface: #1e293b;
  }
}

अनुशासन जो इसे पकड़ता है वह कच्चे हेक्स कोड को घटक नियमों से पूरी तरह दूर रखना है, और उन्हें रंग टोकन के रूप में नाम देना है। यह वह भी है जहां एक टोकन नामकरण परंपरा भुगतान करती है, जो CSS को संगठित करना जाता है।

थीमिंग वह कारण है कि कस्टम प्रॉपर्टीज़ एकल मान पुनः उपयोग से परे कुछ भी मायने रखती हैं, और यह काम करता है क्योंकि एक थीम आपकी टोकन लेयर का कैस्केड ओवरराइड है। घटक टोकन नाम पढ़ते हैं; एक थीम उन नामों को पेड़ में उच्च बिंदु पर पुनः परिभाषित करता है। घटक लेयर को कोई पता नहीं है कि थीम मौजूद है।

css
:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-surface: #f8fafc;
}

.theme-dark {
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  --color-surface: #1e293b;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --color-bg: #0f172a;
    --color-text: #e2e8f0;
    --color-surface: #1e293b;
  }
}

पैटर्न जो उत्पादन में पकड़ता है वह एक दो-स्तरीय टोकन प्रणाली है। एक पहली स्तर कच्चे मान रखता है (--blue-600: #2563eb), और एक दूसरी स्तर उन्हें संदर्भित करने वाले शब्दार्थ टोकन रखता है (--color-accent: var(--blue-600)). घटक केवल शब्दार्थ स्तर को पढ़ते हैं, इसलिए एक थीम शब्दार्थ टोकन को पुनः असाइन करता है और पैलेट स्तर स्थिर रहता है, जो स्विच को छोटा रखता है और इरादा पठनीय रहता है। एक क्लास ओवरराइड को prefers-color-scheme मीडिया क्वेरी के साथ जोड़ी जाना, जैसा कि ऊपर है, आपको एक सिस्टम डिफ़ॉल्ट प्लस एक मैनुअल टॉगल देता है घटक नियमों को डुप्लिकेट किए बिना। नामकरण अनुशासन जो इसे रखरखाव योग्य रखता है फ़ाइल और टोकन संगठन के बाकी भाग के साथ संबंधित है, और कच्चे मान स्वयं रंग हैं।

तीन अधिक चीजें कस्टम प्रॉपर्टीज़ के उन्नत दृश्य में संबंधित हैं, क्योंकि वे संभव के बजाय पॉलिश जोड़ने को बदलते हैं।

कस्टम प्रॉपर्टीज़ कम्प्यूटेड-वैल्यू समय पर हल होते हैं, जिसका अर्थ है कि ब्राउज़र जब फ़ाइल को पार्स करता है तो नहीं, प्रत्येक तत्व पर स्टाइल कम्प्यूट करता है var() हल करता है। यह बिल्कुल वही है कि थीमिंग क्यों काम करता है और प्रीप्रोसेसर वेरिएबल क्यों नहीं कर सकता: मान जीवंत है, इसलिए यह कैस्केड, इनहेरिटेंस, और रनटाइम पर किए गए परिवर्तनों के लिए प्रतिक्रिया करता है।

रनटाइम दूसरा बिंदु है। क्योंकि ये वास्तविक प्रॉपर्टीज़ हैं, JavaScript उन्हें पढ़ और लिख सकता है, और हर नियम टोकन को पढ़ता है तुरंत अपडेट होता है:

css
:root {
  --sidebar-width: 280px;   /* JS पर रनटाइम में पढ़ा और सेट किया जाता है */
}

एक स्क्रिप्ट document.documentElement.style.setProperty('--sidebar-width', '320px') को कॉल कर सकता है और लेआउट नए मान के विरुद्ध रीफ्लो करता है, कुछ Sass वेरिएबल, पृष्ठ लोड होने से बहुत पहले संकलित, कभी नहीं दे सकता। आप इसे एक सबट्री के लिए भी स्कोप कर सकते हैं प्रॉपर्टी को रूट के बजाय किसी भी तत्व पर सेट करके, जो परिवर्तन को पेड़ की उस शाखा तक सीमित रखता है।

तीसरा बिंदु प्रॉपर्टी पर ही नियंत्रण है। @property आपको एक कस्टम प्रॉपर्टी को एक प्रकार, एक प्रारंभिक मान, और क्या यह इनहेरिट करता है, के साथ पंजीकृत करने देता है, जो कस्टम प्रॉपर्टीज़ का सुचिंतित एनिमेशन को अनलॉक करता है (एक सादा कस्टम प्रॉपर्टी एक ऑन/ऑफ़ जंप के रूप में एनिमेट करता है क्योंकि ब्राउज़र एक अनटाइपड मान को इंटरपोलेट नहीं कर सकता). इसके साथ, आधुनिक मान फंक्शन टोकन से स्वाभाविक रूप से पढ़ते हैं: clamp(min, preferred, max) पसंदीदा मान लेता है लेकिन कभी सीमा को छोड़ता नहीं है, min() अपने तर्कों का सबसे छोटा रिटर्न करता है और max() सबसे बड़ा रिटर्न करता है, इसलिए width: min(100%, var(--max-width)) एक मीडिया क्वेरी के बिना टोकन पर एक द्रव चौड़ाई को कैप करता है।

Junoथीमिंग एक थीम .theme-dark जैसी क्लास के तहत विभिन्न मानों वाले समान टोकन नाम है। class="theme-dark" सेट करें और हर नियम जो उन टोकन को पढ़ता है हल्का करता है, एक घटक को संपादित किए बिना। यही कारण है कि आप हर नियम में सीधे हेक्स कोड टाइप करने के बजाय अपने रंगों को टोकन के रूप में नाम देते हैं।
Junoथीमिंग क्योंकि टोकन कैस्केड करते हैं, एक थीम केवल एक क्लास या prefers-color-scheme मीडिया क्वेरी के तहत समान नामों के लिए दूसरा मान सेट है। कच्चे हेक्स को घटक नियमों से दूर रखें और टोकन नामों को पढ़ें इसके बजाय, और एक पूरा सबट्री एक ओवरराइड से पुनः स्किन करता है। क्लास को टॉगल करें या OS सेटिंग का मिलान करें और उन टोकन को पढ़ने वाली सब कुछ अनुसरण करती है।
Junoथीमिंग कस्टम प्रॉपर्टीज़ कम्प्यूटेड-वैल्यू समय पर हल होती हैं, इसलिए वे जीवंत हैं: JavaScript --sidebar-width को रनटाइम पर सेट कर सकता है और हर नियम जो इसे पढ़ता है रीफ्लो करता है, जो कोई प्रीप्रोसेसर वेरिएबल नहीं कर सकता। दो-स्तरीय सेटअप, कच्चे पैलेट टोकन शब्दार्थ टोकन के अंतर्गत, एक थीम स्विच को कुछ पुनः असाइनमेंट तक रखता है। और @property प्लस clamp(), min(), और max() उन टोकन को एनिमेट और मीडिया क्वेरी के बिना बंधे रखते हैं।