Sass Variables

Sass Variables

Ang variable ay isang paraan ng pag-iimbak ng impormasyon na maaaring gamitin muli sa hinaharap.

Sa pamamagitan ng Sass, maaari mong ilagay ang:informationInilagay sa mga variable, halimbawa:

• string
• number
• color
• boolean
• list
• null

Ginagamit ng Sass ang simbolo ng $ kasunod ng pangalan upang ideklara ang mga variable:

Mga pangungusap ng Sass ng variable

$variablename: value;

Ang halimbawa na ito ay nagdeklara ng 4 na variable:

• myFont
• myColor
• myFontSize
• myWidth

Pagkatapos ideklara ang mga variable, maaari mong gamitin ang mga ito kahit saan:

SCSS Syntax:

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

Kaya, kapag ang Sass file ay binabaliktad, gagamitin nito ang mga variable (myFont, myColor atbp.) at maglathala ng pangkaraniwang CSS at ilagay ang halaga ng mga variable sa CSS, tulad ng:

CSS Output:

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

Bawatang Sass ng variable

Ang mga variable ng Sass ay makukuha lamang sa antas ng kanilang paglilipat.

Mga halimbawa na ito:

SCSS Syntax:

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

<p> Ang kulay ng teksto sa tag ay magiging pulang o berde? Ay pulang!

Isang ibang paglilinaw, $myColor: green; ay nasa <h1> inside the rules, and is only available there!

Kaya, ang CSS output ay magiging:

CSS Output:

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

Good, this is the default behavior of variable scope.

Using Sass !global

Maaaring gamitin !global Switches override the default behavior of variable scope.

!global Ipinapakita na ang variable ay global, na nangangahulugang maaring ma-access ito sa anumang antas.

Mga halimbawa (kasama ang mga ito sa itaas, ngunit nagdagdag ng !global）：

SCSS Syntax:

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

Ngayon <p> Ang kulay ng teksto sa tag ay magiging berde!

Kaya, ang CSS output ay magiging:

CSS Output:

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

Tip:Mga global variable ay dapat maipaliwanag sa labas ng anumang patakaran. Isang magandang paraan ay maglagay ng lahat ng global variable sa sariling file, na may pangalan na "_globals.scss", at gamitin @include Keywords include this file.