naichi's lab

3日後の自分(他人)への書き置き

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

railstutorial.jp

Rails Tutorialやってます。

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

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

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メタ言語

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