पाठ 30, कुल 30 में

CSS Variables — नाम देकर value सहेजो

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS Transitions और Animations अंतिम टेस्ट दें

कल्पना कीजिए आपकी वेबसाइट में वही हरा रंग बीस जगह इस्तेमाल होता है — headings, buttons, links, borders और header का background। फिर एक दिन आप वह हरा रंग बदलकर नीला करना चाहते हैं। Variables के बिना आपको बीसों जगह ढूँढकर एक-एक करके बदलना होगा, और उम्मीद करनी होगी कि कोई जगह छूटे नहीं। CSS variables से आप एक लाइन बदलते हैं और पूरी साइट एक साथ बदल जाती है।

Diagram — देखें, यह सब कैसे जुड़ता है

CSS variable, जिसे custom property भी कहते हैं, एक value है जिसे आप नाम देकर सहेजते हैं और stylesheet में कहीं भी दोबारा इस्तेमाल करते हैं। आप इसे एक बार परिभाषित करते हैं, और हर नियम जो इसका इस्तेमाल करता है, वह value अपने आप ले लेता है।

Variable बनाना और इस्तेमाल करना

Variable का नाम हमेशा दो dashes से शुरू होता है, जैसे --main-color। इसे परिभाषित करने की आम जगह :root है, जिसका मतलब है document का सबसे ऊपर — वहाँ परिभाषित variable हर जगह उपलब्ध होता है। उसकी value var() function से वापस पढ़ी जाती है।

Syntax — एक रंग, हर जगह

:root {
  --main-color: #04aa6d;
  --dark-color: #333;
}
h1 { color: var(--main-color); }
button {
  background-color: var(--main-color);
  color: white;
}

अब heading और button एक ही हरा रंग साझा करते हैं। :root में --main-color को हरे से नीला कर दें, और दोनों एक साथ बदल जाते हैं। वही एक लाइन पूरा theme है।

एक value से theme बदलना

Variable बस एक value है, इसलिए आप कुछ ही variables से पूरा colour theme बना सकते हैं: brand रंग के लिए --main-color, पेज के background के लिए --bg-color, text के लिए --text-color, और highlights के लिए --accent-color। पेज का कोई गहरा हिस्सा उन्हीं variables को स्थानीय रूप से फिर से परिभाषित कर सकता है — उस हिस्से के अंदर --bg-color गहरा और --text-color सफेद हो जाता है, जबकि बाकी पेज हल्का ही रहता है।

.dark-box {
  --bg-color: #333;
  --text-color: white;
  background-color: var(--bg-color);
  color: var(--text-color);
}

Note: Variable सिर्फ उसी element के अंदर और उसके बच्चों में काम करता है जहाँ वह परिभाषित है। :root में परिभाषित variable हर जगह काम करता है, लेकिन .dark-box के अंदर परिभाषित variable सिर्फ उसी box के अंदर काम करता है। इसीलिए theme की values के लिए :root मानक जगह है।

Tip: Variables के नाम उनकी value से नहीं, उनके काम से रखें — --main-color, --green से बेहतर है। अगर brand का रंग एक दिन हरे से नीला हो जाए, तो नीली value वाला --green कोड पढ़ने वाले हर व्यक्ति को उलझा देगा।

आम गलतियाँ

दो dashes भूल जाना — -- के बिना main-color variable नहीं है, और browser उसे अनदेखा कर देगा।
var() के अंदर dashes के बिना नाम लिखना, जैसे var(main-color) — अंदर का नाम dashes समेत बिल्कुल एक जैसा होना चाहिए।
Variable को एक element के अंदर परिभाषित करके पेज पर कहीं और इस्तेमाल करने की कोशिश करना — वह सिर्फ उसी element और उसके बच्चों में काम करता है।
Variable का नाम उसकी value पर रखना, जैसे --green — जब रंग बदलेगा, तो नाम झूठ बोलेगा।
यह भूल जाना कि variable के नाम case-sensitive होते हैं — --Main-Color और --main-color दो अलग variables हैं।

याद रखें

CSS variable एक custom property है: -- से शुरू होने वाले नाम के नीचे सहेजी गई value।
Theme के variables को :root में परिभाषित करें ताकि पूरा पेज उनका इस्तेमाल कर सके।
Variable को var(--name) से पढ़ें, जैसे var(--main-color)।
:root में एक value बदलें और उसे इस्तेमाल करने वाला हर नियम एक साथ बदल जाएगा।
Variables के नाम काम से रखें (--main-color), value से नहीं (--green)।

याद रखने की तरकीब: एक लाइन बदलो, पूरा theme बदलो — नाम काम से रखो, रंग से नहीं।

उदाहरण समझिए

:root { --main-color: #04aa6d; } — theme document के सबसे ऊपर एक बार परिभाषित है: brand हरा, गहरा grey, हल्का background और text का रंग।
h1 { color: var(--main-color); } — heading रंग का कोड सीधे लिखने की बजाय variable से brand रंग पढ़ती है।
button { background-color: var(--main-color); } — button उसी variable का इस्तेमाल करता है, इसलिए heading और button हमेशा मेल खाते हैं।
.dark-box { --bg-color: #333; --text-color: white; } — गहरे box के अंदर background और text के variables फिर से परिभाषित हैं, इसलिए सिर्फ वह box गहरा होता है जबकि बाकी पेज हल्का रहता है।
var(--main-color, blue) — var() के अंदर दूसरी value fallback है: अगर variable कभी न मिले, तो उसकी जगह blue इस्तेमाल होगा।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Theme</title>
<style>
:root {
  --main-color: #04aa6d;
  --dark-color: #333;
  --bg-color: #f2f2f2;
  --text-color: #333;
}
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: var(--bg-color); color: var(--text-color); }
h1 { color: var(--main-color); text-align: center; }
.card {
  background-color: white;
  max-width: 500px;
  margin: 20px auto;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
}
button {
  background-color: var(--main-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
}
.dark-box {
  --bg-color: #333;
  --text-color: white;
  background-color: var(--bg-color);
  color: var(--text-color);
  max-width: 500px;
  margin: 20px auto;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
}
.dark-box button { background-color: var(--main-color, blue); }
</style>
</head>
<body>

<h1>One Change, Whole Theme</h1>

<div class="card">
<h2>Light Card</h2>
<p>This card uses the theme colours from :root. Change --main-color once and the heading and button change together.</p>
<button>Join Now</button>
</div>

<div class="dark-box">
<h2>Dark Box</h2>
<p>This box redefines --bg-color and --text-color locally, so only this box turns dark.</p>
<button>Learn More</button>
</div>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>CSS Variables Theme</title>
<style>
:root {
  --main-color: #04aa6d;
  --dark-color: #333;
  --bg-color: #f2f2f2;
  --text-color: #333;
}
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: var(--bg-color); color: var(--text-color); }
h1 { color: var(--main-color); text-align: center; }
.card {
  background-color: white;
  max-width: 500px;
  margin: 20px auto;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
}
button {
  background-color: var(--main-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
}
.dark-box {
  --bg-color: #333;
  --text-color: white;
  background-color: var(--bg-color);
  color: var(--text-color);
  max-width: 500px;
  margin: 20px auto;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
}
.dark-box button { background-color: var(--main-color, blue); }
</style>
</head>
<body>

<h1>One Change, Whole Theme</h1>

<div class="card">
<h2>Light Card</h2>
<p>This card uses the theme colours from :root. Change --main-color once and the heading and button change together.</p>
<button>Join Now</button>
</div>

<div class="dark-box">
<h2>Dark Box</h2>
<p>This box redefines --bg-color and --text-color locally, so only this box turns dark.</p>
<button>Learn More</button>
</div>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।