Sass muuttujat

Sass muuttujat

Muuttuja on tietojen tallennustapa, jota voit käyttää uudelleen myöhemmin.

Sassilla voit tallentaatietoTallennetaan muuttujiin, esimerkiksi:

• merkkijono
• luku
• väri
• totuusarvo
• lista
• null

Sass käyttää dollari-$-merkkiä ja nimeä muuttujan määrittämiseen:

Sass-muuttujien syntaksi

$variablename: value;

Seuraavassa esimerkissä on määritelty 4 muuttujaa:

• myFont
• myColor
• myFontSize
• myWidth

Muuttujien määrittämisen jälkeen voit käyttää näitä muuttujia missä tahansa sijainnissa:

SCSS syntaksi:

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

Kun Sass-tiedosto käännetään, se käyttää muuttujia (myFont, myColor jne.) ja tuottaa tavallista CSS:ää sekä asettaa muuttujien arvot CSS:ään, kuten seuraavasti:

CSS ulostulo:

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

Sass-muuttujien alue

Sass-muuttujat ovat käytettävissä vain niiden määrittäneen syvyyden tasolla.

Tarkastele seuraavaa esimerkkiä:

SCSS syntaksi:

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

<p> Tekstin väri tageissa onko punainen vai vihreä? Se on punainen!

Toinen määrittely, $myColor: green; sijaitsee <h1> säännöissä, ja vain siellä!

CSS ulostulo on siis:

CSS ulostulo:

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

Hyvin, tämä on muuttujien alueen oletuskäytös.

Käytä Sass !global

voidaan käyttää !global Vaihtoehtoinen käyttäytyminen muuttujien alueen peittämiseksi.

!global indikaatio, että muuttuja on globaali, mikä tarkoittaa, että sitä voidaan käyttää kaikilla tasoilla.

Katso seuraava esimerkki (samoin kuin yllä, mutta lisätty !global）：

SCSS syntaksi:

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

Nyt <p> Tekstin väri tageissa on vihreä!

CSS ulostulo on siis:

CSS ulostulo:

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

Vinkki:Yleiset muuttujat tulisi määritellä kaikkien sääntöjen ulkopuolella. Hyvä käytäntö on määritellä kaikki yleiset muuttujat omassa tiedostossaan, nimeltään "_globals.scss", ja käyttää @include Avainsanat sisältävät tämän tiedoston.