Que signifie '&.' dans '&.sub-title' en scss ?

Question

Je suis un novice en matière de CSS et de SCSS.

Dans le code suivant,

.title {
    width: 718px;
    &.sub-title {
      width: 938px;
   }
}

Qu'est-ce que &. signifie ? Est-ce la même chose que la classe d'imbrication ?

Answer 1

En & concatène la classe mère, ce qui donne .title.sub-title (plutôt que .title .sub-title si le & est omise).

Il en résulte qu'avec la & il fait correspondre un élément avec à la fois title y sub-title classes :

<div class='title sub-title'></div> <!-- << match -->

alors que sans la & il correspondrait à un descendant de la classe sub-title d'un élément de classe title :

<div class='title'>
  ...
    <div class='sub-title'></div> <!-- << match -->
  ...
</div>