Variables Sass

Variables Sass

Une variable est un moyen de stocker des informations que vous pouvez réutiliser ultérieurement.

Grâce à Sass, vous pouvezinformationLes informations sont stockées dans les variables, par exemple :

• chaîne de caractères
• numérique
• couleur
• valeur booléenne
• liste
• null

Sass utilise le symbole $ suivi du nom pour déclarer des variables :

Syntaxe des variables Sass :

$variablename: value;

L'exemple suivant déclare 4 variables :

• myFont
• myColor
• myFontSize
• myWidth

Après avoir déclaré les variables, vous pouvez les utiliser à tout moment :

Syntaxe SCSS :

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

Par conséquent, lorsque le fichier Sass est transpilé, il utilise les variables (myFont, myColor, etc.) et génère un CSS ordinaire avec les valeurs des variables placées dans le CSS, comme suit :

Sortie CSS :

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

Portée des variables Sass

Les variables Sass ne sont disponibles qu'au niveau de l'encapsulation où elles sont définies.

Veuillez consulter l'exemple suivant :

Syntaxe SCSS :

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

<p> La couleur du texte à l'intérieur des balises sera-elle rouge ou verte ? C'est le rouge !

Une autre définition, $myColor: green; est située <h1> à l'intérieur des règles, et est disponible uniquement là !

Donc, la sortie CSS sera :

Sortie CSS :

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

Bon, c'est le comportement par défaut de la portée des variables.

Utilisation de Sass !global

Il est possible d'utiliser !global Commutateur couvrant le comportement par défaut de la portée des variables.

!global 指示变量 est globale, ce qui signifie qu'elle peut être accessible à tous les niveaux.

Voyez l'exemple suivant (comme ci-dessus, mais avec !global) :

Syntaxe SCSS :

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

Maintenant <p> La couleur du texte à l'intérieur des balises sera verte !

Donc, la sortie CSS sera :

Sortie CSS :

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

Astuce :Les variables globales doivent être définies en dehors de toute règle. Il est sage de définir toutes les variables globales dans leur propre fichier, nommé "_globals.scss", et d'utiliser @include Les mots-clés contiennent ce fichier.