Sass Variabler
- Forrige side Sass Installation
- Næste side Sass Indlejring
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.
- Forrige side Sass Installation
- Næste side Sass Indlejring