Sass Variabler

Sass Variabler

En variabel er en måde at gemme information på, som du kan bruge gentagne gange senere.

Gennem Sass kan du gemmeinformationgemt i variabler, f.eks.:

• streng
• tal
• farve
• bول
• liste
• null

Sass bruger $-symbolet efterfulgt af et navn til at deklarere variabler:

Sass variabelsyntaks:

$variablename: value;

Nedenstående eksempel deklarerer 4 variabler:

• myFont
• myColor
• myFontSize
• myWidth

Efter at have deklarerede variabler kan du bruge dem på hvilken som helst placering:

SCSS Syntax:

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

Derfor bruger Sass-filer variabler (myFont, myColor osv.) under oversættelse og producerer almindelig CSS samt variabelværdier placeret i CSS, således:

CSS Output:

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

Sass variabelområde

Sass variabler er kun tilgængelige på den definerede indlejningsniveau.

Se nedenstående eksempel:

SCSS Syntax:

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

<p> Teksten i etiketten vil være rød eller grøn? Det er rød!

En anden definition, $myColor: green; er placeret <h1> inde i reglen, og kun der tilgængelig!

Så, CSS output vil være:

CSS Output:

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

Godt, dette er standardadferden for variabelområde.

Brug Sass !global

kan bruges !global Skifter standardadferden for variabelområde. Brug

!global angiver, at variablen er global, hvilket betyder, at den kan tilgås på alle niveauer.

Se nedenstående eksempel (som ovenstående, men med !global）：

SCSS Syntax:

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

Nu <p> Teksten i etiketten vil være grøn!

Så, CSS output vil være:

CSS Output:

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

Tip:Global variable bør defineres uden for alle regler. En fornuftig praksis er at definere alle globale variabler i deres egen fil, navngivet "_globals.scss", og brug @include Nøgleord indeholder denne fil.