Sass variables

Sass variables

En variabel är ett sätt att lagra information som du kan använda senare.

Genom Sass kan du lagrainformationlagras i variabler, till exempel:

• sträng
• nummer
• färg
• boolean
• lista
• null

Sass använder $-symbol följt av namn för att deklarera variabler:

Sass variabelsyntaks:

$variablename: value;

Nedan är ett exempel som deklarerar 4 variabler:

• myFont
• myColor
• myFontSize
• myWidth

Efter att ha deklarerat variabler kan du använda dem var som helst:

SCSS syntax:

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

Därför använder Sass-filer variabler (som myFont, myColor) när de översätts till vanlig CSS och lägger till variablens värde i CSS, till exempel:

CSS utdata:

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

Sass variabelomfattning

Sass variabler är endast tillgängliga på den nivå de definieras.

Se exempel nedan:

SCSS syntax:

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

<p> Textfärgen inom etiketten är antingen röd eller grön? Det är rött!

En annan definition, $myColor: green; finns <h1> inom regeln, och är bara tillgänglig där!

Så, CSS utdata kommer att vara:

CSS utdata:

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

Gott, detta är variabelns standardbeteende.

Använd Sass !global

Man kan använda !global Switchar över skriptomfattningen för variabelns standardbeteende.

!global indikerar att variabeln är global, vilket innebär att den kan nås på alla nivåer.

Se exempel nedan (likt ovan, men med !global）：

SCSS syntax:

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

Nu <p> Textfärgen inom etiketten kommer att vara grön!

Så, CSS utdata kommer att vara:

CSS utdata:

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

Tips:Globala variabler bör definieras utanför alla regler. En smart metod är att definiera alla globala variabler i sin egen fil, kallad "_globals.scss", och använda @include Nyckelord inkluderar denna fil.