Variable

SASS permet de créer des variables réutilisables 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
}
AttentionDivision
Pour des problèmes d'interprétation, la division doit être utilisée à l'intérieur de la fonction calc.
1
$largeur: 10px;
2
p{
3
  width: calc($largeur / 2);
4
}             
AttentionInterpolation
Attention, les variables ne sont pas interprétées 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){     // pas interprétée
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}){  // interprétée
4
  width: calc(100% - #{$largeur});
5
}
Ce qui donne
1
p:nth-child(3){
2
  width: calc(100% - 10px);
3
}