LESSをとりあえず使ってみる

html/css

LESSとは？

（以下本家サイトトップページより直訳）"LESSは、変数、入れ子、オペレーション、関数などの動的な振る舞いをCSSに付与する事でCSSを拡張します。LESSはChrome、Safari、Firefoxのクライアントサイドで実行することが可能であるとともにNode.jsとRhinoを用いてサーバーサイドでも実行することができます。"

ざっくりとさわった限りでは、CSSをより効率良く書くための拡張と理解して問題なさそうです。

LESSでできる事：変数

以下の記述により変数を定義して複数の要素のスタイル定義に利用することができます。

@[変数名]

例えばこんな感じです。

@background-color-header: #E0E0E0;

h1{
    background: @background-color-header
}

h2{
    background: @background-color-header
}

値を変数化する事で、各要素の設定を一括管理することができるようになります。

LESSでできる事：セレクタの入れ子記述

子要素のセレクタを入れ子表現で記述することができます。例えば以下のようなCSSを

header{
    background: #eee;
}

header ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

LESSでは以下のように書くことができます。

header{
    background: #eee;
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

入れ子の入れ子も可能です。またクラスやIDを入れ子にする場合は、IDとクラスの前に"＆"をつけます。例えば以下のようなCSSを

header{
  width: 100%;
}

header#pageHeader{
  background: #eee;
}

header#pageHeader nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

header#pageHeader nav ul li{
  padding: 0;
  margin: 0 20px 0 0;
  display: inline;
}

LESSでは以下のように書くことができます。

header{
    width: 100%;
    &#pageHeader{
        background: #eee;
        nav{
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                li{
                   padding:0;
                   margin: 0 20px 0 0;
                   display:inline; 
                }
            }
        }
    }
}

入れ子にすることでスタイルの要素の親子関係が把握しやすくなります。

LESSでできる事：関数表現

以下の記述により複数のスタイルの指定を一つの関数として定義し、複数の要素に割り当てることができます。

.[関数名](@[引数1]: [デフォルト値], @[引数2]: [デフォルト値]){
    スタイル定義1: @[引数1]
    スタイル定義2: @[引数1]
    スタイル定義3: @[引数2]
}

例えば、以下のようなCSSを

h1{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

h2{
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

LESSでは以下のように記述できます（h2ではデフォルト値の10pxを20pxに変更しています）。

.radius(@radius: 10px){
    -webkit-border-radius: @radius;     /* Chrome,Safari */
    -moz-border-radius: @radius;        /* Firefox */
    border-radius: @radius;             /* CSS3 */
}

h1{
    .radius;
}

h2{
    .radius(20px);
}

関数内での入れ子表現も可能です。例えば以下のような感じです。

.hedaer-footer-nav(){
    nav{
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
               padding:0;
               margin: 0 20px 0 0;
               display:inline; 
            }
        }
    }
}

header{
    width: 100%;
    &#pageHeader{
        background: #eee;
        .hedaer-footer-nav;
    }
}

footer{
    width: 100%;
    &#pageFooter{
        .hedaer-footer-nav;
    }
}

スタイルの定義を再利用できるので、CSSのメンテが楽になりそうです。

LESSでできる事：演算

変数を使った演算もできます。例えば以下のような感じです。

@color-base: #aaa;
@color-light: @color-base + #111;

h1{
    background: @color-base;
}

h2{
    background: @color-light;
}

サイトのカラーグラデーションの管理などに使えそうです。

その他にも様々な使い方ができます。詳細はこちらを見てください。

LESSの実装方法

上記で紹介したLESSの記述はすべてLESSファイル（.less）と言うテキストファイルに記述します。そしてLESSファイルに記述されたスタイルはWebページに適用される前にCSSにコンパイル（変換）される必要があります。LESSをCSSにコンパイルするには以下の3つの方法があります。

  1. 事前にLESSをCSSにコンパイルしてから配布する（WebMatrixを使用した事前コンパイルの方法はこちら）。
  2. クライアントブラウザ上で動的にコンパイルする。
  3. サーバ上でNode.jsとRhinoを用いて動的にコンパイルする。

使ってみた感じでは余計はオーバヘッドを回避するために、(1)がベストソリューションだと思うのですが、今回は一番お手軽（と思われる）(2)の方法を紹介します（ただしこの方法はJavaScriptが利用できることが前提になります）。

本家サイトから、less.jsをダウンロードします。
f:id:chorusde:20120914060611p:image:w500

Webサイトの構成は以下のような感じです。サイトディレクトリ内の任意のフォルダにテキストファイルとしてLESSファイル（.less）を作成してスタイルを記述してください（この例では/css/style.less）。
f:id:chorusde:20120914060610p:image:w360

今回はLESSファイルにこんな記述をしました。

@color-base: #aaa;
@color-light: @color-base + #111;

.hedaer-footer-nav(){
    nav{
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
               padding:0;
               margin: 0 20px 0 0;
               display:inline; 
            }
        }
    }
}

header{
    width: 100%;
    &#pageHeader{
        background: @color-base;
        .hedaer-footer-nav;
    }
}

footer{
    width: 100%;
    &#pageFooter{
        background: @color-light;
        clear: both;
        display: block;
        text-align: center;
        .hedaer-footer-nav;
    }
}

index.htmlにLESSファイルおよびless.jsファイルを読み込むために以下の記述をします。

<link rel="stylesheet/less" type="text/css" href="css/style.less">
<script src="js/less-1.3.0.min.js" type="text/javascript"></script>

この例のindex.html全体はこんな感じです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet/less" type="text/css" href="css/style.less">
        <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
        <title>LESSのデモ</title>
    </head>
    <body>
        <header id="pageHeader">
            <h1>LESSのデモ</h1>
                <nav>
                    <ul>
                        <li>test</li>
                        <li>test</li>
                        <li>test</li>
                    </ul>
                </nav>
        </header>
        <footer id="pageFooter">
            <p>&copy; 2012 chorusde. All rights reserved.</p>
            <nav>
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </nav>
        </footer>
    </body>
</html>

あとはホストするだけですが、その前にWebサーバのMIMEタイプにLESSファイルを追加しておいてください。
f:id:chorusde:20120914060609p:image:w500

ブラウザから確認した結果です。
f:id:chorusde:20120914061134p:image:w500

Firebugで見てみるとCSSがちゃんと生成されています。
f:id:chorusde:20120914061133p:image:w500

かなりすっきりとCSSを書くことができそうなので、有効活用していきたいです。