sass
चर

वाक्य - विन्यास

• $ variable_name : मूल्य ;

सास

वेरिएबल्स का उपयोग एक मान को संग्रहीत करने के लिए किया जाता है जो कि एक Sass दस्तावेज़ में कई बार उपयोग किया जाएगा।

उनका उपयोग ज्यादातर फोंट और रंगों जैसी चीजों को नियंत्रित करने के लिए किया जाता है, लेकिन किसी भी संपत्ति के किसी भी मूल्य के लिए इस्तेमाल किया जा सकता है।

Sass कुछ चिन्ह को चर बनाने के लिए $ प्रतीक का उपयोग करता है।

$font-stack: Helvetica, sans-serif
$primary-color: #000000

body
  font-family: $font-stack
  color: $primary-color

एससीएसएस

जैसे Sass में, SCSS वैरिएबल का उपयोग किसी मान को संग्रहीत करने के लिए किया जाता है जिसका उपयोग कई बार SCSS दस्तावेज़ में किया जाएगा।

वेरिएबल्स का उपयोग अक्सर उपयोग किए जाने वाले संपत्ति मूल्यों (जैसे फोंट और रंगों) को संग्रहीत करने के लिए किया जाता है, लेकिन किसी भी संपत्ति के किसी भी मूल्य के लिए इस्तेमाल किया जा सकता है।

SCSS एक चर घोषित करने के लिए $ प्रतीक का उपयोग करता है।

$font-stack: Helvetica, sans-serif;
$primary-color: #000000;

body {
  font-family: $font-stack;
  color: $primary-color;
}

यदि आप इस चर को एक नया मान असाइन करना चाहते हैं, तो आप !default उपयोग कर सकते हैं, यदि यह अभी तक असाइन नहीं किया गया है:

$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green;        // And now it's green.

चर स्कोप

चर में एक विशिष्ट दायरे में चर मौजूद होते हैं, जैसे कि जावास्क्रिप्ट में।

यदि आप एक ब्लॉक के बाहर एक चर घोषित करते हैं, तो इसका उपयोग पूरे शीट में किया जा सकता है।

$blue: dodgerblue;

.main {
    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue;
}

यदि आप किसी ब्लॉक के भीतर एक चर घोषित करते हैं, तो इसका उपयोग केवल उस ब्लॉक में किया जा सकता है।

.main {
    $blue: dodgerblue;

    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue; // throws a variable not defined error in SASS compiler
}

शीट लेवल (एक ब्लॉक के बाहर) में घोषित वेरिएबल्स को अन्य शीट में भी इस्तेमाल किया जा सकता है यदि वे आयात किए जाते हैं।

रूट पर @ के साथ चर का स्थानीयकरण करें

@ रूट- डायरेक्टिव का उपयोग चरों को स्थानीय बनाने के लिए किया जा सकता है।

$color: blue;

@at-root {
  $color: red;

  .a {
    color: $color;
  }
  .b {
    color: $color;
  }
}

.c {
  color: $color;
}

संकलित है:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

प्रक्षेप

तारों का उपयोग स्ट्रिंग प्रक्षेप में किया जा सकता है। यह आपको चयनकर्ताओं, गुणों और मूल्यों को गतिशील रूप से उत्पन्न करने की अनुमति देता है। और ऐसा चर करने के लिए वाक्य रचना #{$variable} ।

$className: widget;
$content: 'a widget';
$prop: content;

.#{$className}-class {
  #{content}: 'This is #{$content}';
}
// Compiles to

.widget-class {
  content: "This is a widget";
}

हालाँकि, आप इसका उपयोग गतिशील रूप से मिश्रण या कार्यों के नाम उत्पन्न करने के लिए नहीं कर सकते हैं।

SCSS में चर

SCSS चर में $ साइन के साथ शुरू होता है, और CSS गुणों की तरह सेट किया जाता है।

$label-color: #eee;

वे केवल नेस्टेड चयनकर्ताओं के भीतर उपलब्ध हैं जहां वे परिभाषित हैं।

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

यदि वे किसी भी नेस्टेड चयनकर्ताओं के बाहर परिभाषित हैं, तो उनका उपयोग हर जगह किया जा सकता है।

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

उन्हें !global झंडे के साथ भी परिभाषित किया जा सकता है, इस मामले में वे हर जगह उपलब्ध हैं।

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

यह ध्यान रखना महत्वपूर्ण है कि चर नाम हाइफ़न और अंडरस्कोर को परस्पर उपयोग कर सकते हैं। उदाहरण के लिए, यदि आप $label-width नामक एक चर को परिभाषित करते हैं, तो आप इसे $label_width रूप में देख सकते हैं, और इसके विपरीत।