Sass Variables का उपयोग values को store करने के लिए किया जाता है, ताकि हम उन्हें बार-बार reuse कर सकें। Variables की मदद से CSS को ज्यादा flexible, readable और maintainable बनाया जाता है। अगर future में किसी value को change करना हो, तो हमें पूरी file में बदलाव करने की जरूरत नहीं होती, सिर्फ variable की value change करने से पूरा design update हो जाता है।
इस chapter में हम Sass Variables को बिल्कुल beginner-level पर, step-by-step समझेंगे।
Variable क्या होता है
Variable एक container होता है जिसमें हम किसी value को store करते हैं। यह value color, font-size, width, height या कोई भी CSS value हो सकती है।
Sass में variable $ symbol से शुरू होता है।
Sass Variable Syntax
$variable-name: value;
यह syntax Sass compiler को बताता है कि $variable-name नाम का variable बनाया जा रहा है और उसमें value store की जा रही है।
यह variable बाद में कहीं भी use किया जा सकता है।
Simple Variable Example
$primary-color: blue;
p {
color: $primary-color;
}
यह code $primary-color नाम का variable बनाता है और उसमें blue value store करता है।
इसके बाद p selector के अंदर color property में उसी variable का use किया गया है।
यह इसलिए किया जाता है ताकि अगर बाद में text color बदलना हो, तो सिर्फ $primary-color की value change करनी पड़े।
जब इस Sass code को CSS में compile किया जाएगा, तो output कुछ ऐसा होगा:
p {
color: blue;
}
इसका मतलब है कि variable की value replace होकर final CSS बन जाती है।
Sass Variables क्यों Use किए जाते हैं
Variables का main purpose duplication को remove करना है।
अगर एक ही color या size कई जगह use हो रहा है, तो variable के बिना हमें हर जगह manually change करना पड़ेगा। Variable use करने से यह problem solve हो जाती है।
Color Variables Example
$main-color: #3498db;
$secondary-color: #2ecc71;
h1 {
color: $main-color;
}
button {
background-color: $secondary-color;
}
यह code दो color variables define करता है।
h1 में $main-color और button में $secondary-color use किया गया है।
इसका फायदा यह है कि पूरे website का color theme centralized हो जाता है।
Compiled CSS output कुछ ऐसा होगा:
h1 {
color: #3498db;
}
button {
background-color: #2ecc71;
}
Font Variables Example
$base-font-size: 16px;
$heading-font-size: 24px;
body {
font-size: $base-font-size;
}
h1 {
font-size: $heading-font-size;
}
यह code font sizes को variables में store करता है।
यह इसलिए useful है क्योंकि typography को control करना आसान हो जाता है।
अगर future में base font size change करनी हो, तो सिर्फ variable update करना होगा।
CSS output होगा:
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
Spacing Variables Example
$default-padding: 20px;
.container {
padding: $default-padding;
}
.card {
padding: $default-padding;
}
यह code padding को reusable बनाता है।
यह approach layout consistency बनाए रखने में मदद करती है।
Compiled CSS में variable की जगह actual value आ जाती है:
.container {
padding: 20px;
}
.card {
padding: 20px;
}
Variable Naming Rules
Sass variables बनाते समय कुछ rules follow करने चाहिए:
- Variable name
$से शुरू होना चाहिए - Name readable और meaningful होना चाहिए
- Words को hyphen
-से separate करना best practice है
Example:
$primary-bg-color: #ffffff;
यह naming clear बताती है कि variable किस purpose के लिए है।
Variable Scope
Sass में variable का scope भी होता है।
Global Variable
जो variable file के top level पर define होता है, वह पूरे file में accessible होता है।
$text-color: black;
p {
color: $text-color;
}
यह variable global है और कहीं भी use किया जा सकता है।
Local Variable
जो variable किसी selector के अंदर define होता है, वह उसी block तक limited रहता है।
.box {
$box-color: red;
background-color: $box-color;
}
यह variable सिर्फ .box के अंदर valid है।
यह scope rule accidental conflicts से बचाता है।
Sass Variables और CSS Variables का Difference
Sass Variables compile time पर work करते हैं।
CSS Variables browser में runtime पर work करते हैं।
Sass Variables final CSS में दिखाई नहीं देते, उनकी value replace हो जाती है।
CSS Variables final CSS में भी रहते हैं।
इस chapter में हमने Sass Variables पर focus किया है क्योंकि यह Sass का base concept है।
Sass Variables का Practical Benefit
Sass Variables code को:
- Easy to maintain बनाते हैं
- Reusable बनाते हैं
- Professional structure देते हैं
- Large projects में time save करते हैं
Variables Sass की foundation होते हैं और आगे के advanced features जैसे mixins और functions को समझने के लिए जरूरी होते हैं।