Что значит '&.' в '& .sub-title' указывает на scss?

Question

Я новичок в CSS и SCSS.

В следующем коде

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

Что означает &. ?Это то же самое, что и класс вложенности?

Answer 1

& объединяет родительский класс, что приводит к .title.sub-title (вместо .title .sub-title, если & опущен).

В результате & соответствует элементу с классами title и sub-title:

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

без & он будет соответствовать потомку с классом sub-title элемента с классом title:

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