css - selectors - sass<& amp_>

Que hace ''&.'' en ''&.sub-title'' indica en scss?

Question

Soy un novato en CSS y SCSS.

En el siguiente código,

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

¿Qué hace &. ¿medio? ¿Es lo mismo que la clase de anidación?

Answer 1

El & concatena la clase padre, resultando en .title.sub-title (en lugar de .title .sub-title si el & se omite).

El resultado es que con el & coincide con un elemento con las clases de title y sub-title :

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

mientras que sin el & coincidiría un sub-title descendiente con clase de un elemento con title clase:

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