Extension

Les extensions dans Sass permettent de réutiliser des styles en évitant les duplications. Cela fonctionne avec la directive @extend, qui permet à un sélecteur d'hériter des styles d'un autre.

DéfinitionExtension

Un peu comme des variables, on peut créer des blocs de règles réutilisables

1
%bloc{
2
  color: red;
3
}
4
.classe1{
5
  @extend %bloc;
6
  font-style: normal;
7
}
8
.classe2{
9
  @extend %bloc;
10
  font-style: italic;
11
}

Ce qui donne

1
.classe1, .classe2 {
2
  color: red;
3
}
4
.classe1 {
5
  font-style: normal;
6
}
7
.classe2 {
8
  font-style: italic;
9
}

On peut aussi étendre un sélecteur

1
.maClasse{
2
  color: red;
3
}
4
.autreClasse{
5
  @extend .maClasse;
6
  font-style: normal;
7
}

Ce qui donne

1
.maClasse, .autreClasse {
2
  color: red;
3
}
4
5
.autreClasse {
6
  font-style: normal;
7
}