Sass वेरियेबल

Sass वेरियेबल

वेरियेबल एक जानकारी स्टोर के तरीका है, जिसे आगे के लिए दोहराया जा सकता है。

Sass के माध्यम से, आपसूचनास्टोर किए जाते हैं, जैसे:

• स्ट्रिंग
• संख्या
• रंग
• बुल वैल्यू
• सूची
• null

Sass वेरियेबल को घोषित करने के लिए $ संकेत के बाद नाम का उपयोग करता है:

Sass वेरियेबल व्याकरण:

$variablename: value;

नीचे का उदाहरण 4 वेरियेबल का घोषणा करता है:

• myFont
• myColor
• myFontSize
• myWidth

वेरियेबल का घोषणा करने के बाद, आप इन वेरियेबल का उपयोग किसी भी स्थान पर कर सकते हैं:

SCSS व्याकरण:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

तथापि, जब Sass फ़ाइल डिकॉडिंग किया जाता है, तो यह वेरियेबल (myFont, myColor आदि) उपयोग करता है और नैरूपक CSS उत्पन्न करता है और CSS में वेरियेबल के मूल्य को रखता है, जैसे:

CSS आउटपुट:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
#container {
  width: 680px;
}

Sass वेरियेबल की दायरा

Sass वेरियेबल केवल उस निर्देशाक लेवल पर उपलब्ध होते हैं जहाँ उन्हें परिभाषित किया गया है。

अभी नीचे का उदाहरण देखें:

SCSS व्याकरण:

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> टैग के भीतर का लेख का रंग लाल या हरा होगा? लाल है!

एक और परिभाषा, $myColor: green; इसमें परिभाषित है <h1> नियम के भीतर, और वहीं ही उपलब्ध है!

तो, CSS आउटपुट यह होगा:

CSS आउटपुट:

h1 {
  color: green;
}
p {
  color: red;
}

अच्छा, वेरियेबल के देशबंधु की व्यवहारणा का दिफ़ॉल्ट व्यवहार है。

Sass !global इस्तेमाल करें

इस्तेमाल कर सकते हैं !global स्विच कवर वेरियेबल के देशबंधु की व्यवहारणा को ओवरराइड करता है。

!global वेरियेबल ग्लोबल है, इसलिए यह सभी स्तरों पर पहुँच सकता है।

देखें नीचे का उदाहरण (ऊपर के साथ समान, लेकिन !global):

SCSS व्याकरण:

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

अब <p> टैग के भीतर का लेख का रंग हरा होगा!

तो, CSS आउटपुट यह होगा:

CSS आउटपुट:

h1 {
  color: green;
}
p {
  color: green;
}

सलाहदाता:सभी नियम के बाहर ग्लोबल वेरियेबल को परिभाषित करना चाहिए।सही तरीका अपने अपने फ़ाइल में सभी ग्लोबल वेरियेबल को परिभाषित करना है, जिसे "_globals.scss" कहा जाता है, और @include कीवर्ड इस फ़ाइल को समाविष्ट करता है。