Sass Variabelen

Sass Variabelen

Een variabele is een manier om informatie op te slaan die u later kunt hergebruiken.

Door Sass kunt uinformatieopgeslagen in variabelen, bijvoorbeeld:

• tekenreeks
• getal
• kleur
• booleaanse waarde
• lijst
• null

Sass gebruikt het $-teken gevolgd door de naam om variabelen te declareren:

Sass variabele syntax:

$variablename: value;

Het volgende voorbeeld声明了 4 个变量：

• myFont
• myColor
• myFontSize
• myWidth

Na het declareren van variabelen kunt u deze overal gebruiken:

SCSS Syntax:

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

Dus wanneer een Sass-bestand wordt gecompileerd, gebruikt het variabelen (myFont, myColor, etc.) en geeft het normaal CSS uit en plaatst de waarden van de variabelen in de CSS, zoals:

CSS Uitvoer:

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

Bereik van Sass variabelen

Sass variabelen zijn alleen beschikbaar op het niveau waarin ze zijn gedefinieerd.

Bekijk het volgende voorbeeld:

SCSS Syntax:

$myColor: rood;
h1 {
  $myColor: groen;
  kleur: $myColor;
}
p {
  kleur: $myColor;
}

<p> De tekstkleur binnen het etiket is rood of groen? Het is rood!

Een andere definitie, $myColor: groen; bevindt zich <h1> binnen de regel, en alleen daar beschikbaar!

Dus, de CSS-uitvoer zal zijn:

CSS Uitvoer:

h1 {
  kleur: groen;
}
p {
  kleur: rood;
}

Goed, dit is het standaardgedrag van het variabelenbereik.

Gebruik Sass !global

Het kan worden gebruikt !global Schakel het standaardgedrag van het variabelenbereik over.

!global het geeft aan dat de variabele globaal is, wat betekent dat deze op alle niveaus kan worden bereikt.

Zie onderstaand voorbeeld (hetzelfde als hierboven, maar met !global）：

SCSS Syntax:

$myColor: rood;
h1 {
  $myColor: groen !global;
  kleur: $myColor;
}
p {
  kleur: $myColor;
}

Nu <p> De tekstkleur binnen het etiket zal groen zijn!

Dus, de CSS-uitvoer zal zijn:

CSS Uitvoer:

h1 {
  kleur: groen;
}
p {
  kleur: groen;
}

Tip:Globale variabelen moeten buiten elke regel worden gedefinieerd. Het is een slim idee om alle globale variabelen in hun eigen bestand te definiëren, genaamd "_globals.scss", en te gebruiken @include Sleutelwoorden bevatten dit bestand.