lessでコーディングしてるんだけど、ちょっとあれって思う所があったので書いておく。
lessでは変数を使うことが出きるようになってて便利。
こんなように書く。
@color: #4D926F; #header { color: @color; } h2 { color: @color; }
で、レスポンシブWebデザインはメディアクエリで画面サイズを切り分けて最適なcssを読ませるんだけど、そのメディアクエリをcss内に書くときはこう書く。
@media screen and (max-width: 768px){ #contents{ width:100%; } }
これをlessでやろうとすると”@”がかぶってるので動かない。
変数扱いになっちゃう。
lessファイルには直接メディアクエリが書けないので、
変数を使いたい場合はメディアクエリを、
・link要素のmedia属性 ・cssファイルの@importで指定 ・cssファイルの@mediaで指定
のどれかに書くしかないけど、
せっかくlessで書いてるのにメディアクエリ用にcssを用意するのもどうかなーと思う。
なにかいいやり方はないものか。