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

railstutorial.jp

Rails Tutorialやってます。

Rails Tutorial通しでやる→よし作るぞ→駄目だ分からん→Rails Tutorialやる ってのを３周目くらい。

何度やっても難しいんだけど３周目だけあってだいぶサクサクと進めるようになった。

Sass

その中にSass(CSSを楽に記述できるやつ)の説明があって

Sassは、SCSSをCSSに変換する際に、&:hoverを #logo:hoverに置換します。

とある。でもその直前にはネストするだけで継承してくれるって書いてあって。

？？？

＆いらなくね？

試しに書いてみたんだけど

#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で "#hoge :hover" と "#hoge:hover" は意味が違うのかな？

と、気になったのでメモでした。

そのうち分かる日がくるでしょう。無視して進めよう。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語