cre8cre8
AskMe♥

今更ながらless.jsでレスポンシブデザインできるコードをさっくりと書いてみた

おっす。職場でLess.jsをどうにか普及させようとしているたくみんです。
Less.js かわいいよ Less.js

さて、前置きはこのくらいにして Less.js でレスポンシブ対応をさっさとやりましょう。

1.wrapper {
2    /* PCのときは幅980px固定 */
3    width: 980px;
4
5    /* タブレットの時はタブレット幅全部 */
6    @media only screen and (max-width: 768px) {
7        width: 100%;
8    }
9
10    /* スマートフォンの時はちょっと小さめに */
11    @media only screen and (max-width: 414px) {
12        width: 90%;
13    }
14}

入れ子便利ですね。マジ便利なのでよく使ってます。
ですが、まだCSS感が拭えないですね。もっとLess♡Lessしたいです。
なので、上記の Less.js をもう少し改造してみましょう。

1/* 各幅の値 */
2@mobile_width:  90%;
3@tablet_width:  100%;
4@default_width: 980px;
5
6/* media query の設定 */
7@mobile: ~"only screen and (max-width: 414px)";
8@tablet: ~"only screen and (max-width: 768px)";
9
10.wrapper {
11    width: @default_width;
12    @media @tablet { width: @tablet_width; }
13    @media @mobile { width: @mobile_width; }
14}

もっとLess♡Lessした結果がこれだよ。
これが私の限界ですので、もっと(・∀・)イイ!!書き方がありましたら
ぜひぜひ下にあるフォームからご連絡ください。
デザイナーさんだと全く読めなくなる場合もあるので、
共同開発する際には、ご注意くださいね。

でわでわ、読んでいただいてありがとうございました。m( )m

≪ 前の記事
ほな、Less.js使って開発効率を上げてみまひょか〜
(俺得スクリプト付き)
次の記事 ≫
【コピペでできる!】Railsでless.jsを使いたかったのでシェルスクリプト作ってワンライナーでできるようにしてみた。

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事