初めに

現在いろいろと勉強中です。
カリキュラムと同様に書いたつもりが、cssのスペースの有無で表示が変わってしまったので残しておきます。

本題

以下のコードです。&を使ってのコードはあまり見慣れていなかったのですが、

& .text {
        ～～～～～ // 何かしらのcssコード
        
        &.add { 
            ～～～～～～ // 何かしらのcssコード
        }

上記の&.addの部分ですが、ここにスペースが入るか（& .add）で意味が変わります。

スペースがない場合は元のhtmlタグで

<div class="text add">
    <p>~~~</p>
</div>

に対してのコードになります。

スペースがある場合は

<div class="text">
    <p class="add">~~~</p>
</div>

これに対してのコード。

スペース一つで全然違う意味になってしまうみたいです。
ほかにもいろいろな書き方できるみたいです。調べてみます。