Variable

SASS permet de créer des variables réutilisable dans votre page.

Celles-ci doivent être précédées du caractère $.

Méthodevariable

Les variables peuvent être utilisées telles quelles, ou dans des opérations.

1
$couleur: #000;
2
$taille: 2px;
3
$style: solid;
4
$largeur: 100px;
5
6
p{
7
  color: $couleur;
8
  border: $taille $style $couleur;
9
  width: $largeur + $taille;
10
}
Ce qui donne
1
p{
2
  color: #000;
3
  border: 2px solid #000;
4
  width: 102px;
5
}
AttentionInterpolation
Attention, les variables ne sont pas interpréter quand elle sont dans des fonctions CSS ou dans des chaînes de caractères.
1
$nb:3;
2
$largeur:10px;
3
p:nth-child($nb){
4
  width: calc(100% - $largeur);
5
}
Une erreur est générée, les variables ne sont pas interprétées.
Les variables doivent être interpoler
1
$nb:3;
2
$largeur:10px;
3
p:nth-child(#{$nb}){
4
  width: calc(100% - #{$largeur});
5
}
Ce qui donne
1
p:nth-child(3){
2
  width: calc(100% - 10px);
3
}
DéfinitionListe, map
liste de valeurs
1
$couleurs : (#007bff, #5a6268, #28a745, #bd2130);
map
1
$couleurs : (primary:#007bff, secondary: #5a6268, succes: #28a745, danger: #bd2130)