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

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

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

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

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

Ответы

Ответ 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>