Imbrication

Pour réduire l'écriture, SASS permet d'imbriquer les sélecteurs.

Méthodeimbrication

1
.maClasse{
2
  color: red;
3
  p {
4
    border: 2px solid black;
5
  }
6
}

Ce qui donne

1
.maClasse {
2
  color: red;
3
}
4
.maClasse p {
5
  border: 2px solid black;
6
}

DéfinitionRéférence au sélecteur

On peut faire référence au sélecteur avec le symbole &

1
.maClasse{
2
  color: red;
3
  &:hover {
4
    border: 2px solid black;
5
  }
6
  &-2 {
7
    border: 1px solid white;
8
  }
9
}

Ce qui donne

1
.maClasse {
2
  color: red;
3
}
4
.maClasse:hover {
5
  border: 2px solid black;
6
}
7
.maClasse-2 {
8
  border: 1px solid white;
9
}

DéfinitionExtension

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

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 bloc "classique"

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
}
DéfinitionMixin
Les mixins, comme les extends permettent de récupérer des morceaux de code.
Elles ont l'avantage d’être paramétrable.
1
@mixim 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 {
2
  color: red;
3
  font-style: normal;
4
}
5
6
.classe2 {
7
  color: red;
8
  font-style: italic;
9
}
Avec paramètre
1
@mixin bloc($couleur: red){
2
    color: $couleur;
3
}
4
.classe1{
5
  @include bloc;
6
  font-style: normal;
7
}
8
.classe2{
9
  @include bloc(blue);
10
  font-style: italic;
11
}
Ce qui donne
1
.classe1 {
2
  color: red;
3
  font-style: normal; 
4
}
5
6
.classe2 {
7
  color: blue;
8
  font-style: italic; 
9
}