まだまだ勉強始めたばかりですが、いろいろと便利な機能があって、もっと早くやっときゃよかったなって思ってます。
今日覚えたのはこれ。「&」
セレクタをネストさせている時に、親要素を選択するためのものだそうです。
1 2 3 4 5 6 7 8 9 10 11 |
$Color_link:#aaf; $Color_link_hover:#faa; a { &:link,&:visited { color:$Color_link; text-decoration: none } &:hover { color:$Color_link_hover; } } |
ならば、
1 2 3 4 5 6 7 8 9 10 11 |
a:link { color:#aaf; text-decoration:none; } a:visited { color:#faa; text-decoration:none; } a:hover { color:#aaf; } |
みたいに展開できます。
つまり、&の位置に入れ子になっている親のセレクタが代入されるんですね。
で、ここからが本題で、僕がもっと早く勉強しとけばよかったって思った部分なんですが、
この&を後ろにくっつけると…
1 2 3 4 5 6 |
.box { margin:6px; .ie6 & { margin:3px; } } |
&の位置に親の名前が入るので、この場合は「.ie6」 の後ろに親の「.box」が入ります。つまり、
1 2 3 4 5 6 |
.box { margin:6px; } .ie6 .box { margin:3px; } |
となる、と。
ということは予め、HTML側に
1 2 3 4 5 6 7 |
<!--[if lt IE7]><html class="ie ie6" lang="ja"><![endif]--> <!--[if IE7]><html class="ie ie7" lang="ja"><![endif]--> <!--[if IE8]><html class="ie ie8" lang="ja"><![endif]--> <!--[if IE9]><html class="ie ie9" lang="ja"><![endif]--> <!--[if (gt IE 9)!(IE)]><!--> <html lang="ja"> <!--<![endif]--> |
みたいにしておいて、IEだけに別のCSSを適用みたいなのを書く時 ((コンディショナルセレクタとか呼ぶそうです)) 、通常の記述に関連付けて書くことが出来るため、非常に見通しが良くなります。
変数とかも併用すればもっと柔軟にできるかもしれませんね。
例えば、ie6だけマージンを半分にするならば、
1 2 3 4 5 6 7 |
.foo { $ml:8px; margin-left:$ml; .ie6 & { $margin-left:$ml/2; } } |
みたいな感じでしょうか?
このようなミックスインを作っておいて、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@mixin set_margin ($top:0,$right:0,$bottom:0,$left:0,$fl_pos:'none') { margin:$top $right $bottom $left; .ie6 & { @if $fl_pos == 'left' { margin:$top $right $bottom $left; margin-left:$left/2; } @else if $fl_pos == 'right' { margin:$top $right $bottom $left; margin-right:$right/2; } @else { margin:$top $right $bottom $left; } } } |
フロートさせるときに、
1 2 3 4 5 |
.inner { @include set_margin(20px,20px,20px,20px,'left'); background-color:#faa; float:left; } |
とかしてもいいかもしれませんね。
それでは。
コメントする