プログラマー向けのCSS:LESS入門

みなさんこんにちは。今週も登場しましたチーフエンジニアの菊池です。
今週は先週に引き続き「プログラマー向けのスタイルシート LESS 」について、入門編をお送りしたいと思います。

まず始める前に、僕と同じ vim 使いの方は VIM-LESS というのを入れておくと、シンタックスハイライトとかしてくれるので便利です。
VIM-LESS
LESS をカラフルな配色で見やすく書きたい方は、この VIM-LESS をインストールしちゃいましょう。 これを入れると vim 使いさんは少し幸せに準備完了です。

それでは、早速 LESS について話を進めていきたいと思います。

ざっくりで恐縮ですが、LESS とは CSS を拡張した書式で HTML のスタイルを書いて、それを CSS に変換するものです。 その流れは、おおまかに次のようになります。
  1. LESS の書式でスタイルを書く
  2. ブラウザ上で動的に、またはコマンドで静的に変換して CSS を生成
  3. ブラウザで HTML に適用してスタイルを反映
まず LESS が便利なのは、2 にあるように LESS の書式で書いたスタイルをブラウザ上で動的に CSS に変換できるところです。変換した CSS はそのままブラウザ上で HTML に適用されます。これだと LESS 形式のファイルをいちいちコマンドで CSS に変換しなくて済むので、とても楽です！

コマンドで静的な CSS ファイルを生成することも出来ますが、ここでは、お手軽なので動的に変換する方法を紹介したいと思います。

どれだけお手軽かというと、次のようなタグを HTML の HEAD タグに書くだけです！たったこれだけで LESS のファイルを動的に CSS に変換することが出来てしまいます。
<link rel="stylesheet/less" type="text/css" href="/style.less">
<script type="text/javascript" src="/less-1.3.0.min.js"></script>
link タグには LESS 形式のファイルを指定します。ここで rel 属性に "stylesheet/less" を指定して下さい 。次の script タグには LESS の JavaScript を指定します。link タグと script タグは、この順番でないと動きません。逆の順番にすると CSS への変換は行われないので、気をつけてください。

script タグに指定する JavaScript は LESS のサイトにある DOWNLOAD リンクからダウンロードできます。
LESS - The dynamic stylesheet language

さて、ここからいよいよ LESS の便利な書き方を幾つか紹介してみたいと思います。

変数の使い方
LESS では変数が使えます。その使い方は簡単で、変数名の前に @ を付けるだけです。

変換前のLESS 
@color: #8fbc8f;

h1 {
  color: @color;
}

h2 {
  color: @color;
}
変換後のCSS 
h1 {
  color: #8fbc8f;
}

h2 {
  color: #8fbc8f;
}
見たままんまなので、簡単ですね！

Mixinの使い方
オブジェクト指向言語を知っている人ならおなじみの Mixin ですが、LESS ではこんな風に使えます。

変換前のLESS 
.round (@radius: 10px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

h1 {
  .round;
}

h2 {
  .round(15px);
}
変換後のCSS 
h1 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

h2 {
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}
これも見たまんまで簡単ですね！そして、パラメーターを渡せるのが便利だと思いませんか？ここでも変数は @ で始まります。

ネストした書き方
ブロックの中にセレクターを書いて、さらにその中に...という書き方は想像通りの書き方で、こうなります。

変換前のLESS
#header {
  background-color: #000000;

  .title {
    color: #ffffff;
    font-weight: bold;
  }
}
変換後のCSS 
#header {
  background-color: #000000;
}

#header .title {
    color: #ffffff;
    font-weight: bold;
}
いいんじゃないでしょうか。もちろん、変数と Mixin とネストした書き方を組み合わせることができます。

今回はここまでにしますが、詳しくは LESS のサイトに載ってますので興味のある方は見てみてください！
 LESS - The dynamic stylesheet language

最後になりますが、僕が LESS を知ったのは、デザイン能力に乏しいエンジニアの救世主 Twitter Bootstrap で LESS が使われていたのがきっかけです。JavaScript で動的に CSS を生成する考え方など、「おおおっ！」と思ったので紹介してみました。直接使う機会はないかもしれませんが、開発の道具箱に入れておくと、何かの機会に役に立つかもしれません。

それでは、機会がありましたらまた会いましょう！お元気でー。良い週末を！

菊池