scssで'&.sub-title'の'&.'は何を示すのですか？

質問

CSSとSCSSの初心者です。

以下のコードで

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

何をするのか &です。 は何を意味するのでしょうか？それはネストクラスと同じですか？

どのように解決するのですか？

この & は親クラスを連結し、結果として .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>