lessCSSでデザインを調整しながら開発していると、ちょっと色やサイズの修正で色々と修正しなければならないので不便で、億劫になって、まいっかって思ってしまいますよね。LESSでは変数定義やミックスインを定義することができます。CSSでは、フラットな階層構造で記述しなくてはなりませんが、LESSでは階層構造で定義することが出来るので、わかりやすくなりますね。通常のWebアプリやサイトでLESSを使う方法は2パターンあります。後者はブラウザ上で動的に解釈されますので、パフォーマンスに問題が出てしまいますので、実際にリリースする時には、前者のコンパイルして組み込む方法を利用するのが良いはずです。開発中は動的に生成するのが、デザインの確認が楽で良いと思います。因みに、後者は解析した結果のCSSをlocalStorageに保持しているようで、初回にはLESSからCSSを生成しますが、それ以降では、localStorageを読みに行く仕組みでパフォーマンスの劣化についてもある程度は解消しているのではないでしょうか。Less.jsをダウンロードして、HTMLに組み込みます。CSSの代わりにLESSファイルを組み込みます。実際には次のHTMLのようになります。</body></html>これだけで準備はOKのようです。ポイントは、linkタグのrelをstylesheet/lessにすること。cssではなくて、lessなんですね。あとは、style.lessに記述していけば良いです。変数を定義するLESSでは、変数を定義することが出来ます。色については、各所で同じ色をつかっていて、カラーコードが散らかってしまいますね、途中でここの色を変えてくださいとか言うことがあるかと思います。そんなときには、変数を変えてあげるだけですむので、便利ですよね。@subColor;}こんな感じになります。演算するLESSでは演算をすることも出来ます。色で言えば、ちょっとだけ明るい色がほしいとか、暗い色がほしいとかってことがありますよね。グラデーションがかかったボタンとかいいですね。グレーをちょっと薄くしたり、濃くしたりするのは、こんな感じになります。5px;}関数を使う先ほどは、色を演算してみましたが、関数が定義されていています。色にまつわる関数もいくつかあって、先ほどの演算と同じようなことが出来るものに、darkenとかlightenがあります。これらは、パーセンテージを指定して、明るくしたり暗くしたりします。そのほかに色々とありますので、使ってみるとよいですね。はてなブログProフリーでプロのグラマーしています。パターン別構築・運用ガイドを読みました。夫婦で人間ドックに行ってきたLifeLogをシェアしてみた。フットボールライフ・ログサービススターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。