CSS Variables

किसी specific brand blue color के साथ एक website design करने की कल्पना करें। आप इस color को अपनी stylesheets में पचास अलग जगहों पर इस्तेमाल करते हैं: buttons, headers, links, और borders के लिए। अगर आपका client brand color को green में बदलने का फ़ैसला करता है, तो आपको सभी पचास color codes हाथ से search करके replace करने होंगे। CSS variables (custom properties) इस समस्या को solve करते हैं। ये आपको अपना color code एक central जगह पर define करने देते हैं, इसे एक नाम देते हैं (जैसे '--brand-blue'), और अपनी stylesheets में हर जगह उस नाम को reference करते हैं। brand color को green में बदलने के लिए, आपको बस उस एक central जगह पर variable value update करनी होती है।

In this page:

:root में Variables Declare करना
var() Function इस्तेमाल करना
Custom Property Fallback Values
Variable Inheritance और Scope
Variables के साथ Theming

Syntax

css

:root {
  --variable-name: value;
}
selector {
  property: var(--variable-name, fallback);
}

:root में Variables Declare करना

अपने variables को अपनी stylesheets में globally available बनाने के लिए, आप उन्हें ':root' selector के अंदर declare करते हैं। यह selector document structure में सबसे high-level element को represent करता है, variables को बाकी सभी selectors के लिए accessible बनाते हुए।

Note: CSS standards का पालन करने के लिए हमेशा अपने custom variable names double hyphens से शुरू करें (जैसे, --brand-color)।

Warning: Variable names case-sensitive हैं; '--brandColor' और '--brandcolor' को दो अलग variables की तरह treat किया जाएगा।

उदाहरण: Declaring Variables in :root

css

<style>
:root {
  --brand-color: teal;
}
</style>
<p>Variable declared globally in :root</p>

var() Function इस्तेमाल करना

किसी declared variable value को किसी property पर लागू करने के लिए, आप var() function इस्तेमाल करते हैं, parentheses के अंदर अपना custom variable name pass करते हुए।

Note: margins, padding, और colors जैसी values के लिए variables इस्तेमाल करना आपकी stylesheet structures को consistent और साफ़ रखता है।

Warning: अगर आप किसी ऐसे variable को call करने की कोशिश करते हैं जो मौजूद नहीं है, तो browser rule को नज़रअंदाज़ कर देगा और अपनी default fallback value इस्तेमाल करेगा।

उदाहरण: Using the var() Function

css

<style>
:root {
  --brand-color: teal;
}
p {
  color: var(--brand-color);
}
</style>
<p>Uses the variable via var()</p>

Custom Property Fallback Values

var() function आपको एक second argument के रूप में एक fallback value specify करने देता है। अगर custom variable load होने में fail हो जाए, तो browser automatically fallback value इस्तेमाल करेगा।

Note: styling breaks रोकने के लिए हमेशा अपने var() functions के अंदर standard fallback values लिखें।

Warning: fallback value सिर्फ तभी इस्तेमाल होगी जब custom variable undefined हो; अगर variable की कोई invalid value है तो यह इस्तेमाल नहीं होगी।

उदाहरण: Custom Property Fallback Values

css

<style>
p {
  color: var(--undefined-color, gray);
}
</style>
<p>Falls back to gray since --undefined-color isn't set</p>

Variable Inheritance और Scope

Variables standard CSS inheritance और scoping rules follow करते हैं। जब :root के बजाय किसी specific selector के अंदर declare किए जाते हैं, तो variable local होता है और सिर्फ उस element और उसके children के लिए accessible होता है।

Note: अपने component styles को encapsulated और organized रखने के लिए local variables इस्तेमाल करें।

Warning: किसी local variable को उसके parent container scope के बाहर reference करने की कोशिश करना fail हो जाएगा।

उदाहरण: Variable Inheritance and Scope

css

<style>
.card {
  --card-color: navy;
  color: var(--card-color);
}
</style>
<div class="card">Local variable, only accessible here and inside</div>

Variables के साथ Theming

CSS variables dynamic website theme changers बनाना आसान बना देते हैं। अपने page color variables को :root के अंदर define करके और उन्हें एक custom class (जैसे '.dark-mode') के तहत update करके, आप themes को instantly toggle कर सकते हैं।

Note: themes को साफ़ तरीके से toggle करने के लिए custom data attributes को variables के साथ combine करें।

Warning: सुनिश्चित करें कि आपके color variables दोनों themes में high contrast बनाए रखें ताकि आपका content readable रहे।

उदाहरण: Theming with Variables

css

<style>
:root {
  --bg: white;
  --text: black;
}
.dark-mode {
  --bg: black;
  --text: white;
  background: var(--bg);
  color: var(--text);
}
</style>
<div class="dark-mode">Theme toggled by swapping the variables</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Specificity Hierarchy Next Lesson → CSS !important