最近、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はシンプルに記述できるが、機能が少ないというレビューもあるようで、物足りなくなったりする可能性があります。
他の方法とも比べて、最良方法を選択できると良さそうです。また、学習が進んだら記事を書こうと思います。
コメントを残す