第1回　LESSのメリットと導入方法

CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる

最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも

「より柔軟に」
「よりわかりやすく」
「より速く」
「よりミスを少なく」

記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。

CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。

最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？

本連載では、主にスマートフォンWebサイトを作成しているWebデザイナー／マークアップエンジニアに向けて、「⁠どの機能がよく使われるのか」「⁠実際にどういう使い方ができるのか」という、チュートリアルに留まらないLESSのテクニックを紹介していきます。

CSSで困る5つのこととLESSのメリット

自分で記述したわけではないCSSや、昔自分が書いたのだけどもう内容を忘れてしまったようなCSSを編集するときを思い出してみてください。以下のような点で困ることはないでしょうか？

記述が冗長で、どこにどの記述があるのかわかりにくい
プロジェクト内の独自の記述が存在する（ブラウザ依存のコードやCSSハックなど）
同じレイアウトで色を変えたページを作ってくれと言われた（色の一括置換で済めば良いが、同じ色を違う役割で使ってしまっている⁠）⁠
CSSファイルが1ファイルにまとめられているため同時作業がしにくい
うまくページが表示されないときに、どこの記述がまちがっているのかがわからない

LESSなら、これらの問題をスマートに解決できます。

階層構造を持たせてCSSを記述できる

HTMLの階層構造と合わせてどこに何が記述してあるのかが明快になり、「⁠記述がどこにあるか」と迷わなくなります。

「ミックスイン」という仕組みであらかじめ宣言した記述を呼び出すだけで、複雑なコードを利用できる

覚えにくく、長いコードを何度も書く必要はありません。

新たなブラウザが出たときも、1箇所を修正するだけで対応できるので、メンテナンス性も向上します。

変数を用いて柔軟に処理できる

たとえば、変数を用いて色宣言をしておけば、たった1行変更するだけで、指定の色をすべて変えることができます。

分割したファイルを1つのCSSファイルとして生成することができる

ページや役割ごとに分割することで、ファイルの競合（コンフリクト）を減らすことができます。

コンパイラがミスを指摘してくれる

LESSで記述した内容は、一度CSSへ変換（コンパイル）されます。その時にデバッガが動作して、文法的にまちがっている場合は記述のどこがまちがっているのかを指摘してくれます。

これは、LESSの記述だけではなく通常のCSSの記述もチェックの範囲になるので、単純にCSSのバリデーターとしても役立ちます。

これにより、見つけにくいスペルミスやセミコロンの記述漏れなどをかんたんに抽出できます。文法ミスを未然に防ぐことにより、よりCSSの記述内容に集中できるでしょう。

この他にもLESSを使いこなすことによりたくさんのメリットがあるのですが、それらは実際のコードとともにあらためて紹介していきます。

LESSを利用するには

最近はLESSを使うための各種ツール／アプリがリリースされてきましたが、今回は最も手軽に利用できる公式のless.jsを使う方法を紹介します。

less.jsは、クライアント側で動くLESSのコンパイラです。

以下の3つの手順をふむだけでかんたんに利用できます。

LESSの公式Web（以下）からless.jsをダウンロードします。
- http://lesscss.org/

外部CSSの読み込みを変更します。

<link rel="stylesheet" type="text/css" href="styles.css">

↓

<link rel="stylesheet/less" type="text/css" href="styles.less">

CSSの後に以下を記述して、less.jsを読み込みます（必ずcssの後に記述してください⁠）⁠。
```
<script src="less.js" type="text/javascript"></script>
```

あとはLESS記法でstyles.lessを編集していくだけです。

less.jsはどのような処理をしているのか

LESSでコーディングしてみる前に、less.jsの動作を理解しておきましょう。

<link rel="stylesheet/less" type="text/css" href="styles.less">

で読み込んだ「rel="stylesheet/less"」という属性は、通常のブラウザではCSSの解釈の範囲外（CSSとしては認識できない）となります。

そのstyle.lessを、less.jsは解析／コンパイルします。そして、<head>内のless.jsを読み込んだ直後に

<style type="text/css"></style>

として展開します。FirefoxのFirebugや、Safari／ChromeのWeb Inspectorで生成されたHTMLを見てみるとわかりやすいでしょう。

less.jsでLESSの内容を一度コンパイルするという処理が入るため、素のCSSを読み込むよりも、わずかではありますが、初回の表示は余分な時間がかかります。

しかし、less.jsの優れたところは、生成結果をキャッシュすることです。しかも、ブラウザキャッシュではなく、HTML5のローカルストレージを利用します。そのため、昨今の（モダンな）ブラウザであれば、2回目以降のアクセスはless.jsがLESSを解析する時間がなくなるため、高速に表示できるようになっています。

また、less.jsでは、付加機能として（コンパイラとしてはあたりまえではありますが）コンパイルエラーが出たときにどこがまちがっていたのかを教えてくれます。これはLESSのメリットの一例としても前述したとおりですね。

以上、実際にLESSが解決してくれる悩みと、less.jsの利用方法をご紹介しました。悩みについては、CSSを日頃から記述されている方ならば、1つは「あるある！」とうなづける話があったのではないでしょうか？

次回からはLESS記法について具体的に説明していきます。LESSが「なぜわかりやすいのか」「⁠なぜ効率的なのか」が実感していただけるはずなので、ぜひお楽しみに！