今さらながらの CSSメタ言語『less』入門

最近、CSSは素のまま書かずに「less」とか「sass」とか「scss」などのいわゆる「メタ言語」で記述するのが一般的らしい。そんな話は聞いていたのですが、忙しさにかまけて勉強を怠っておりました。

ようやく調べてみたものの、どうやら最近少しやり方なども変わってきたようなので、今さらながらメモ。私と同じく乗り遅れてしまった方は、これを機会にやってみてはいかが?

メタ言語ってなに?

そもそもメタ言語とはなにか。それは「ある言語を定義するための言語」という、混乱しそうな説明ですが、要するに「CSSを生成するための別の記述」のこと。CSSには、例えば「見出しと、あるエリアには同じ色を使いたい」という場合にも、変数などの概念がないため、次のように2回同じ記述をしなければなりません。

#header {
    ….
    color: #4d926f;
}
h2 {
    ….
    color: #4d926f;
}

そこで、メタ言語を用いると変数などの概念を取り入れて、次のように記述することができ、

@color: #4d926f; /* これが「変数」 */

#header {
    color: @color; /* この「@」から始まるキーワードが後で置き換わる */
}
h2 {
    color: @color;
}

これを「コンパイル」という操作でCSSに変換することで、CSSの管理を楽にするという手法のこと。プログラミングの世界では一般的なことですが、HTML/CSSのマークアップエンジニアの方にとっては、ちょっとピンと来ない概念かもしれません。慣れればぐっと便利になるでしょう。

JavaScriptライブラリを取得

lessは、どこかのバージョンからJSライブラリが提供されているようです。少し前の入門記事などではRubyをインストールして、コンパイルといった操作になるため、かなり面倒でしたが、今は非常に楽です。

次のサイトからダウンロードして、組み込みます。

そしたら、上記の lessの記述をコピーして、新しいファイルに貼り付け、「style.less」などのファイル名で保存します。そして、HTMLからは次のようにしてこのファイルにリンクします。

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
<script type=”text/javascript” src=”less.min.js”></script> 

ポイントは「rel」属性が通常「stylesheet」なのに対して、lessの場合は「stylesheet/less」となっています。これに反応して、JSライブラリがリアルタイムでCSSに変換するというわけです。

こうしてページを表示すると、問題なくWebページを表示することができます。

コンパイルする

このまま運用することも可能ではありますが、このままだとJavaScriptが利用できない環境では、スタイルが一切あたらないことになります。また、表示速度も遅くなってしまいます。そこで、完成したlessファイルを「コンパイル」して、CSSファイルとして保存します。

これにもやり方がいくつかあるようですが、このブログでも紹介したCodeKit」などのソフトを使うのが簡単そうです。後は、作ったCSSを通常通りリンクすれば、これまで通り使うことができます。CSSを変えたいときは少し面倒ですが、lessをいったん変更した後、コンパイルをしてCSSをアップロードし直すという作業になります。

他の方法との違い

冒頭で紹介したとおり、CSSのメタ言語には現在この「less」の他に「sass」や「scss」といった方法があるようで、どれが主流というわけでもないようです。lessはシンプルに記述できるが、機能が少ないというレビューもあるようで、物足りなくなったりする可能性があります。

他の方法とも比べて、最良方法を選択できると良さそうです。また、学習が進んだら記事を書こうと思います。

    Comments

    comments

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    %d人のブロガーが「いいね」をつけました。