CSSでデザインを調整しながら開発していると、ちょっと色やサイズの修正で色々と修正しなければならないので不便で、億劫になって、まいっかって思ってしまいますよね。
LESSでは変数定義やミックスインを定義することができます。また、CSSでは、フラットな階層構造で記述しなくてはなりませんが、LESSでは階層構造で定義することが出来るので、わかりやすくなりますね。
通常のWebアプリやサイトでLESSを使う方法は2パターンあります。
- LESSをコンパイルしてCSSを生成してHTMLに組み込む方法
- LESSからJavaScriptで動的にCSSを生成する方法
後者はブラウザ上で動的に解釈されますので、パフォーマンスに問題が出てしまいますので、実際にリリースする時には、前者のコンパイルして組み込む方法を利用するのが良いはずです。開発中は動的に生成するのが、デザインの確認が楽で良いと思います。因みに、後者は解析した結果のCSSをlocalStorageに保持しているようで、初回にはLESSからCSSを生成しますが、それ以降では、localStorageを読みに行く仕組みでパフォーマンスの劣化についてもある程度は解消しているのではないでしょうか。
使ってみる
LESSのJavaScriptをGetting started | Less.jsをダウンロードして、HTMLに組み込みます。また、CSSの代わりにLESSファイルを組み込みます。実際には次のHTMLのようになります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>LESS First Step</title> <link rel="stylesheet/less" type="text/css" href="style.less" /> <script type="text/javascript" src="less-1.3.1.min.js"></script> </head> <body> <!-- HTMLコンテンツ --> </body> </html>
これだけで準備はOKのようです。ポイントは、linkタグのrelをstylesheet/lessにすること。cssではなくて、lessなんですね。あとは、style.lessに記述していけば良いです。
変数を定義する
LESSでは、変数を定義することが出来ます。
例えば、色については、各所で同じ色をつかっていて、カラーコードが散らかってしまいますね、途中でここの色を変えてくださいとか言うことがあるかと思います。そんなときには、変数を変えてあげるだけですむので、便利ですよね。
@bgColor: #E3E3E3; @baseColor: #5A579D; @subColor: #23AC0E; body { background-color: @bgColor; color: @baseColor; } #main { border: solid 1px @subColor; }
こんな感じになります。簡単です。
演算する
LESSでは演算をすることも出来ます。色で言えば、ちょっとだけ明るい色がほしいとか、暗い色がほしいとかってことがありますよね。例えば、グラデーションがかかったボタンとかいいですね。
グレーをちょっと薄くしたり、濃くしたりするのは、こんな感じになります。
@color: #999; @darkColor: @color - #111; @lightColor: @color + #111; .button { background: -moz-linear-gradient(center top, @darkColor, @color 25%, @lightColor 50%, @color 75%, @darkColor); background: -webkit-gradient(linear, center top, center bottom, from(@darkColor), color-stop(25%, @color), color-stop(50%, @lightColor), color-stop(75%, @color), to(@darkColor)); border-radius: 5px; }
関数を使う
先ほどは、色を演算してみましたが、関数が定義されていています。色にまつわる関数もいくつかあって、先ほどの演算と同じようなことが出来るものに、darkenとかlightenがあります。これらは、パーセンテージを指定して、明るくしたり暗くしたりします。そのほかに色々とありますので、使ってみるとよいですね。
@color: #999; @darkColor: darken(@color, 10%); @lightColor: lighten(@color, 20%); .button { background: -moz-linear-gradient(center top, @darkColor, @color 25%, @lightColor 50%, @color 75%, @darkColor); background: -webkit-gradient(linear, center top, center bottom, from(@darkColor), color-stop(25%, @color), color-stop(50%, @lightColor), color-stop(75%, @color), to(@darkColor)); border-radius: 5px; }