CSSを早く書くことが出来るLESSに入門しました！

みなさんはCSSの拡張メタ言語であるLESSを知っていますか？
拡張メタ言語というのは、普通の言語とは違って、ある言語をより簡単に書くために作られた言語です。
例えば最近だと、CoffeeScriptとかTypeScriptとかが話題になっていますね。
これらは全てJavaScriptの拡張メタ言語であり、CoffeeScriptやTypeScriptで書いたファイルをコンパイルするとJavaScriptを生成することが出来ます。

今回入門してみたLESSはCSSの拡張メタ言語です。つまりLESSで書いたファイルをコンパイルすると、CSSが生成されるわけですね。

それでは早速入門してみましょう！！

LESSのメリット・デメリット

▶メリット
・導入が簡単
実際僕も軽く書いてみましたがほとんどLESSを意識することがないです。
CSSを書いていて、変数があればいいなぁとかネスト出来ればいいなぁと思っていたのが解消されているからかもしれません。
とにかく導入が簡単なのがメリットです。

・コードが簡潔に理解しやすくなる
変数や関数のようなMixinという仕組みを使うことですっきり書くことが出来ます。
同じコードが重複する、ということも少なくなるので理解しやすくなります

▶デメリット
・コンパイルする必要がある
LESSで書かれたものは一度コンパイルする必要があります。
LESSのコンパイルはJavaScriptで行うことが出来るので比較的簡単に導入することが出来ますが、やはりクライアントサイドでコンパイルしてしまうと、パフォーマンスが落ちるなどのデメリットがあるので普通はコンパイルしたものをサーバーに置くのが普通でしょう。

LESSを動かすには？

LESSを動かすには3つの方法があります。

1. サーバー側(Node.js)でコンパイルしたCSSを読み込む
2. コンパイルツールやウェブサービスで変換してCSSとして読み込む
3. JavaScriptを読み込んでクライアントサイドでCSSに変換する

今回は簡単に動かすために3のless.jsをHTMLに埋め込んで動かしてみます。
以下のコードをHTMLに埋め込みましょう。

これでstyle.lessに書いたLESSが動くようになりました。
次の章で実際に書いていきましょう。

LESSを書いてみよう

LESSでは変数、ネスト（入れ子構造）、Mixin(関数のようなもの)を使うことが出来ます。
CSSが書ければほとんど覚えることがないのでビビる必要はありません。
1つずつ見て行きましょう。

変数が使える

LESS：

@color: #eee;

.contain {
    color: @color;
}
#comment {
    background-color: @color;
}

CSS：

.contain {
    color: #eee;
}
#comment {
    background-color: #eee;
}

変数は「@〜〜」で表すことが出来ます。
CSSを書いていると何回も同じ色のコードを書くことがあります。
これだと変更をかけるときにいくつもの修正がはいることになります。
かといって一括置換も怖いですよね。
変数が入るだけでもLESSを使う価値は出そうです。

Mixin（関数のようなもの）が使える

LESS：

.rounded-corners(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.contain {
    .rounded-corners;
}
#comment {
    .rounded-corners(10px);
}

CSS：

.contain {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#comment {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

共通化しているコードやプレフィックスがつくようなコードをこのような形でまとめておくと何回も同じコードを書くことがなくなり便利です。
また例にあるように変数で定義してあげればpxだけ違うようなものにも対応出来るのでとても便利です。

ネスト（入れ子構造）で書くことが出来る

LESS：

.contain {
    border: solid 2px #eee;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
    
    .inner {
        margin: 0 auto;
        padding: 5px;
    }
    .logo {
        float: left;
        height: 55px;
    }
}

CSS：

.contain {
    border: solid 2px #eee;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.7);
}
.contain .inner {
    margin: 0 auto;
    padding: 5px;
}
.contain .logo {
    float: left;
    height: 55px;
}

上記の例のようにネスト（入れ子構造）にすることが出来ます。
こうすることによって直感的にわかりやすくなりますよね。
これで無駄なクラスを定義することが減りそうです。

計算式も書ける

LESS：

@color: #111;
@pad: 10px;

.contain {
    padding: @pad + 20;
}
header {
    color: @color * 6;
}

CSS：

.contain {
    padding: 30px;
}
header {
    color: #666;
}

簡単な計算式を書くことが出来ます。
幅の調整や余白サイズなどをこれでうまく管理することが出来そうです。
また、こういう風に計算式で書くことによって保守性も高まりそうですね。

終わりに

導入ハードルの高さ、学習コストの観点から考えて、これだけ便利なものがすぐ使えるというのはとても魅力的だと思います。
またより高機能なSCSS(Sass)などを使うほどでもないけど。。。というときに便利ですね。
チーム内で導入の検討を考えてみてはいかがでしょうか。

参考資料

• LESS公式サイト

更新情報はFacebookページで！

ブログの更新、読んで役立つ他ブログの記事などを更新しています。