直樹2012.10.0246366176この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。LESSメタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。いった言語によって記述されたソースコードと同じ意味(機能)を持ちながら、より簡略的に表現できるようにしたための言語というわけです。念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ!」というセリフの豚という表現が正にメタに当たります。※豚というのは例えであって、本当に動物の豚だといっているわけではありません。他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較的もてはやされており、MicrosoftもTypeScriptというものを発表しました。その書き方CSSの文法を簡略化したものがLESSです。基本的な文法はCSSとほとんど変わりがありません。219px;}上の例は、LESSの機能の一つである入れ子のサンプルコードです。containerクラスを持つHTML要素の子要素に対してスタイルを適用する場合、CSSだと全ての子要素に親要素のセレクタを記述しますが、LESSは入れ子構造で書くことでそれを表現することができます。入れ子というのはHTMLの記述と通じているので、スタイルの方も構造が見えやすくなったりします。拡張メタ言語は純粋なプログラミング言語とは違うという性質上、そのままではWebブラウザが認識してくれないので、実行時に何らかの形でCSSやJavaScript形式にコンパイル(変換)する必要があります。普通ならRubyやnode.jsといったサーバー側でコンパイルするのですが、LESSはJavaScriptだけでコンパイル可能なため、クライアント側だけで完結することが可能です。(※)※実際はパフォーマンス等の理由から全てクライアント側に任せるのはナンセンスですが、その辺についてはSCSS(Sass)との比較に関する記事を書いたときに触れるとします。導入その1そんな訳で、手始めにLESSが動作する環境を用意してみます。LESSを動かすための手法として以下の3つがあげられます。サーバー側(Node.js環境)でコンパイルしたCSSをクライアントで読み込むどっかのコンパイルツールを拾ってくるか、オンラインジェネレータ等を使わせてもらうJavaScriptで動的にCSSに変換する一番お手軽な3でやってみます。以下のサイトに変換のためのJSファイルがあるので、もらっておきます。src="js/lib/less-1.3.0.min.js"></script>このような感じでLESSファイル以降に読み込んでおけば、ブラウザで読み込まれたときにLESSがCSSに変換され、headタグ内に埋め込まれます。導入その2LESSの編集に特化したエディタを導入しておくとします。Studioプラグインを入れた環境で開発していますが、LESS用エディタは含まれていないので、自分で追加することになります。LESS今回はこのプラグインを使うことにします。実用に耐えられるだけの機能は網羅されているのと、比較的マメにアップデートされていることもあり、まずまず使う分には問題なさそうです。Step.1まずプラグインが動作するための下準備として、「Xtext」を予めインストールします。LESSをインストールします。http://www.normalesup.org/~simonet/soft/ow/update/構わん、続けろ無事に再起動できたら、準備は完了。LESSの強調表現、コードアシスト等が使えるようになっているはずです。基本的な機能LESSの基本的な機能をサラっと見ていきます。いってもCSSの知識があれば新しく覚えることはごく僅かで、プログラミングにおける引数と関数の概念が頭に入っていれば、既に7~8割は使いこなせると言っても過言ではありません。#DBE9FE;}Webサイトをデザインする際、やみくもに色を乱用しないためにテーマといったものを定義して、使用する色を制限するのが一般的ですが、それでもサイトの規模が大きくなると指定する箇所が多くなって、メンテナンス性が損なわれる経験は良くあるかと思います。フォントや枠線、背景などの色を変数にしておけば、そういった泥沼からは解消されるので、これだけでもLESSを採用する価値は充分にあるといえます。#009980);}変数のように単一の値だけでなく複数のスタイルをまとめて定義しておき、引数を渡して呼び出すことでより柔軟性のある記述が実現できます。例にあるような、ベンダープレフィックスを要するCSS3の機能などソースが冗長化しがちなモノに対して効果を発揮します。219px;}HTMLタグのようにCSSセレクタを入れ子で表現することができます。これによってLESSのソースコードからHTMLがどのような構造になっているのか把握するのが容易になり、スタイルを記述する順序があちこちに入り乱れるのを抑えることができます。構造がスタイルから構造が把握できるということは、余計なクラス名を定義するのを防ぐことも期待できます。#666;}変数や関数(Mixins)に対して四則演算を使うことができます。カラーコードや余白サイズなどに対して計算処理を加えることで値を変えるというものです。使用する場面が限定されそうな感じですが、使えないこともなさそうです。LESSを使う上で注意したいこと非常に便利で使えば開発効率UP間違いナシのLESSですが、やみくもに使えば陥りがちな点もあります。不要なものまで入れ子にしてしまう入れ子にすればその分全体の構造が見やすくなりますが、LESSで入れ子にしたものはCSSにコンパイルされると全て子孫セレクタとして出力されます。CSSはその性質上、セレクタ内の要素を右から順にDOMツリーを辿っていくことで要素を特定します。そのため入れ子が深いほど、この辿っていく手間がかかるということになり、少なからずパフォーマンスに影響します。クラス名ひとつで要素が特定できるのであれば、むやみに入れ子にする必要は無いと思います。Mixinが便利すぎてやめられないソースコード上に同一のスタイルが何箇所あろうが、Mixinで定義さえしておけば、それぞれのセレクタにはMixin名だけ記述しておいて、後に改修が発生したとしても修正箇所は1箇所で済みます。一見するとこれはスタイルの定義を一箇所にまとめているように見えがちですが、ひとたびCSSにコンパイルされてしまえば、そのスタイルはMixin名を記述した箇所すべてにコピーされるため、結果的に定義が重複しているのと変わりありません。それによってソースコードが肥大化するのは決してスマートとはいえないです。純粋にCSSコーディングする際は同一のスタイル定義を重複させないためにクラス名の付与は入念にするものですが、LESSにおいてもそのスタンスは守るべきかと思います。おわりに手軽さを売りにしている反面、機能としては限定されたものに落ち着いているLESSですが、導入ハードルの低さや学習コストの観点からすると、非常に魅力ある言語といえます。私もこれといって「覚える」ということをしていませんが、基本的な作法を習得するのにさして時間はかかりませんでした。急な開発で従来の知識をそのまま活かしつつ効率化を図りたいという方にはうってつけの言語かと思います。高機能なSCSS(Sass)にステップアップするための準備段階として触れてみるのも良いかもしれません。