SCSSで&を使うタイミング

同様の疑問に遭遇していた記事などを参考にしつつ

参考

Sassの&(アンパサンド)の扱いが分からんって話 - naichi's lab

引用

＆いらなくね？
試しに書いてみたんだけど

# hoge {
  font-size: 1.7em;
  :hover{      /* & なし */
    color:#fff;
  }
}

# fuga {        
  font-size: 1.7em;
  &:hover{    /* & あり */
    color:#fff;
  }
}

展開されたのがこれ

# hoge {
  font-size: 1.7em;
}
# hoge :hover {
  color: #fff;
}

# fuga {
  font-size: 1.7em;
}
# fuga:hover {
  color: #fff;
}

ふーん。。。
何が違うんや。。。
ってあれ、貼り付けて気づいたけどスペースの有無が違う？

CSSについて

スペースで親子関係を示す

継承と子孫セレクタとは？：CSS入門

table td {}

親(半角スペース)子 {}

CSSでは半角スペースは、親と子の関係を示しているようだ。

CSSではIDとクラスはスペースなしで連結可能？　SCSSでは連結ではなく入れ子の形に構文が拡張された？？

# hoge{
  &.foo
}

は#hoge.fooに展開されるので、idがhogeでclassがfooの要素という意味になると推測。