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;
}

సస్స్ ఫైల్ ట్రాన్స్‌పిల్ అయ్యేటప్పుడు, ఇది వేర్యబుల్స్ (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; 位于

规则内，并且只在那里可用！

కాబట్టి, 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 ఈ ఫైల్లో కీలకపదాలు ఉన్నాయి.