Que signifie «&». dans '& .sub-title' indique dans scss?

Question

Je suis un débutant pour CSS et SCSS.

Dans le code suivant,

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

Que signifie &.? Est-ce la même chose que la classe d'emboîtement?

Answer 1

Le & concatène la classe parente, résultant en .title.sub-title (plutôt que .title .sub-title si la & est omis).

Le résultat est qu'avec le & il correspond à un élément avec à la fois title et sub-title Des classes:

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

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

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