NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

SCSS(Sass)の親セレクタ(&)はとても便利

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1256日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

まだまだ勉強始めたばかりですが、いろいろと便利な機能があって、もっと早くやっときゃよかったなって思ってます。

今日覚えたのはこれ。「&」

セレクタをネストさせている時に、親要素を選択するためのものだそうです。

 ならば、

 みたいに展開できます。

つまり、&の位置に入れ子になっている親のセレクタが代入されるんですね。

で、ここからが本題で、僕がもっと早く勉強しとけばよかったって思った部分なんですが、

この&を後ろにくっつけると…

 &の位置に親の名前が入るので、この場合は「.ie6」 の後ろに親の「.box」が入ります。つまり、

 となる、と。

ということは予め、HTML側に

 みたいにしておいて、IEだけに別のCSSを適用みたいなのを書く時[*1] 、通常の記述に関連付けて書くことが出来るため、非常に見通しが良くなります。

変数とかも併用すればもっと柔軟にできるかもしれませんね。

例えば、ie6だけマージンを半分にするならば、

 みたいな感じでしょうか?

このようなミックスインを作っておいて、

 フロートさせるときに、

 とかしてもいいかもしれませんね。

それでは。

TAGS