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

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

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

 ならば、

 みたいに展開できます。

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

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

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

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

 となる、と。

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

 みたいにしておいて、IEだけに別のCSSを適用みたいなのを書く時 ((コンディショナルセレクタとか呼ぶそうです)) 、通常の記述に関連付けて書くことが出来るため、非常に見通しが良くなります。

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

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

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

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

 フロートさせるときに、

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

それでは。

コメントする