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
}