HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS

HTML5 × CSS3 × jQueryを真面目に勉強してみる

#Node.js

#HTML5

#JavaScript

#RIA

#CSS

山田直樹

2012.10.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。

拡張メタ言語 - LESS

メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。

念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。
※豚というのは例えであって、本当に動物の豚だといっているわけではありません。

他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較的もてはやされており、MicrosoftもTypeScriptというものを発表しました。

LESSとCSS - その書き方

CSSの文法を簡略化したものがLESSです。なので基本的な文法はCSSとほとんど変わりがありません。

LESS

.container {
	border: solid 2px #5D9BF6;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
	min-width: 960px;
	
	.inner {
		margin: 0 auto;
		padding: 8px;
	}
	.logo {
		float: left;
		height: 59px;
		margin: 4px 90px 0 0;
		width: 219px;
	}
}

CSS

.container {
	border: solid 2px #5D9BF6;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
	min-width: 960px;
}
.container .inner {
	margin: 0 auto;
	padding: 8px;
}
.container .logo {
	float: left;
	height: 59px;
	margin: 4px 90px 0 0;
	width: 219px;
}

上の例は、LESSの機能の一つである入れ子のサンプルコードです。containerクラスを持つHTML要素の子要素に対してスタイルを適用する場合、CSSだと全ての子要素に親要素のセレクタを記述しますが、LESSは入れ子構造で書くことでそれを表現することができます。入れ子というのはHTMLの記述と通じているので、スタイルの方も構造が見えやすくなったりします。

導入が他の言語よりも簡単

拡張メタ言語は純粋なプログラミング言語とは違うという性質上、そのままではWebブラウザが認識してくれないので、実行時に何らかの形でCSSやJavaScript形式にコンパイル（変換）する必要があります。普通ならRubyやnode.jsといったサーバー側でコンパイルするのですが、LESSはJavaScriptだけでコンパイル可能なため、クライアント側だけで完結することが可能です。(※)

※実際はパフォーマンス等の理由から全てクライアント側に任せるのはナンセンスですが、その辺についてはSCSS(Sass)との比較に関する記事を書いたときに触れるとします。

LESSを動かす - 導入その1

そんな訳で、手始めにLESSが動作する環境を用意してみます。LESSを動かすための手法として以下の3つがあげられます。

サーバー側（Node.js環境）でコンパイルしたCSSをクライアントで読み込む
どっかのコンパイルツールを拾ってくるか、オンラインジェネレータ等を使わせてもらう
JavaScriptで動的にCSSに変換する

一番お手軽な3でやってみます。以下のサイトに変換のためのJSファイルがあるので、もらっておきます。

LESS « The Dynamic Stylesheet language

<link rel="stylesheet/less" href="less/style.less" />
<script src="js/lib/less-1.3.0.min.js"></script>

このような感じでLESSファイル以降に読み込んでおけば、ブラウザで読み込まれたときにLESSがCSSに変換され、headタグ内に埋め込まれます。

LESSを動かす - 導入その2

LESSの編集に特化したエディタを導入しておくとします。私は普段eclipseにAptana Studioプラグインを入れた環境で開発していますが、LESS用エディタは含まれていないので、自分で追加することになります。

Eclipse plugin for LESS

今回はこのプラグインを使うことにします。実用に耐えられるだけの機能は網羅されているのと、比較的マメにアップデートされていることもあり、まずまず使う分には問題なさそうです。

Step.1: まずプラグインが動作するための下準備として、「Xtext」を予めインストールします。
http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/; 必要なのはXtextだけなので、コレの最新版のみにチェックをつけます
Step.2: 無事インストールが終了して再起動したら、改めてEclipse plugin for LESSをインストールします。
http://www.normalesup.org/~simonet/soft/ow/update/; 構わん、続けろ; 無事に再起動できたら、準備は完了。LESSの強調表現、コードアシスト等が使えるようになっているはずです。

LESSを動かす - 基本的な機能

LESSの基本的な機能をサラっと見ていきます。とはいってもCSSの知識があれば新しく覚えることはごく僅かで、プログラミングにおける引数と関数の概念が頭に入っていれば、既に7～8割は使いこなせると言っても過言ではありません。

変数が使える

LESS

@radius: .4em;
@labelcolor: #DBE9FE;
@innerpadding: 8px 12px;

.container {
	border-radius: @radius;
	padding: @innerpadding;
}
label {
	color: @labelcolor;
}

CSS

.container {
	border-radius: .4em;
	padding: 8px 12px;
}
label {
	color: #DBE9FE;
}

Webサイトをデザインする際、やみくもに色を乱用しないためにテーマといったものを定義して、使用する色を制限するのが一般的ですが、それでもサイトの規模が大きくなると指定する箇所が多くなって、メンテナンス性が損なわれる経験は良くあるかと思います。主にフォントや枠線、背景などの色を変数にしておけば、そういった泥沼からは解消されるので、これだけでもLESSを採用する価値は充分にあるといえます。

関数のようなものが使える - Mixins

LESS

.bg-gradient (@topcolor: #fff, @midcolor: #666, @bottomcolor: #000) {
	background-image: -webkit-linear-gradient(top, @topcolor, @midcolor 50%, @bottomcolor);
	background-image: -moz-linear-gradient(top, @topcolor, @midcolor 50%, @bottomcolor);
	background-image: -o-linear-gradient(top, @topcolor, @midcolor 50%, @bottomcolor);
	background-image: -ms-linear-gradient(top, @topcolor, @midcolor 50%, @bottomcolor);
	background-image: linear-gradient(to bottom, @topcolor, @midcolor 50%, @bottomcolor);
}

.container {
	border-radius: .4em;
	padding: 8px 12px;
	.bg-gradient;
}
.inner {
	margin: 0 auto;
	padding: 8px;
	.bg-gradient(#ffb90d, #cc0045, #009980);
}

CSS

.container {
	border-radius: .4em;
	padding: 8px 12px;
	background-image: -webkit-linear-gradient(top, #fff, #666 50%, #000);
	background-image: -moz-linear-gradient(top, #fff, #666 50%, #000);
	background-image: -o-linear-gradient(top, #fff, #666 50%, #000);
	background-image: -ms-linear-gradient(top, #fff, #666 50%, #000);
	background-image: linear-gradient(to bottom, #fff, #666 50%, #000);
}

.inner {
	margin: 0 auto;
	padding: 8px;
	background-image: -webkit-linear-gradient(top, #ffb90d, #cc0045 50%, #009980);
	background-image: -moz-linear-gradient(top, #ffb90d, #cc0045 50%, #009980);
	background-image: -o-linear-gradient(top, #ffb90d, #cc0045 50%, #009980);
	background-image: -ms-linear-gradient(top, #ffb90d, #cc0045 50%, #009980);
	background-image: linear-gradient(to bottom, #ffb90d, #cc0045 50%, #009980);
}

変数のように単一の値だけでなく複数のスタイルをまとめて定義しておき、引数を渡して呼び出すことでより柔軟性のある記述が実現できます。例にあるような、ベンダープレフィックスを要するCSS3の機能などソースが冗長化しがちなモノに対して効果を発揮します。

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

LESS

.container {
	border: solid 2px #5D9BF6;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
	min-width: 960px;
	
	.inner {
		margin: 0 auto;
		padding: 8px;
	}
	.logo {
		float: left;
		height: 59px;
		margin: 4px 90px 0 0;
		width: 219px;
	}
}

CSS

.container {
	border: solid 2px #5D9BF6;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.4);
	min-width: 960px;
}
.container .inner {
	margin: 0 auto;
	padding: 8px;
}
.container .logo {
	float: left;
	height: 59px;
	margin: 4px 90px 0 0;
	width: 219px;
}

HTMLタグのようにCSSセレクタを入れ子で表現することができます。これによってLESSのソースコードからHTMLがどのような構造になっているのか把握するのが容易になり、スタイルを記述する順序があちこちに入り乱れるのを抑えることができます。さらに構造がスタイルから構造が把握できるということは、余計なクラス名を定義するのを防ぐことも期待できます。

ちょっとした計算式が書ける

LESS

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

.container {
	padding: @pad + 20;
}
label {
	color: @labelcolor * 6;
}

CSS

.container {
	padding: 30px;
}
label {
	color: #666;
}

変数や関数（Mixins）に対して四則演算を使うことができます。カラーコードや余白サイズなどに対して計算処理を加えることで値を変えるというものです。やや使用する場面が限定されそうな感じですが、使えないこともなさそうです。

LESSを使う上で注意したいこと

非常に便利で使えば開発効率UP間違いナシのLESSですが、やみくもに使えば陥りがちな点もあります。

不要なものまで入れ子にしてしまう

入れ子にすればその分全体の構造が見やすくなりますが、LESSで入れ子にしたものはCSSにコンパイルされると全て子孫セレクタとして出力されます。CSSはその性質上、セレクタ内の要素を右から順にDOMツリーを辿っていくことで要素を特定します。そのため入れ子が深いほど、この辿っていく手間がかかるということになり、少なからずパフォーマンスに影響します。クラス名ひとつで要素が特定できるのであれば、むやみに入れ子にする必要は無いと思います。

Mixinが便利すぎてやめられない

ソースコード上に同一のスタイルが何箇所あろうが、Mixinで定義さえしておけば、それぞれのセレクタにはMixin名だけ記述しておいて、後に改修が発生したとしても修正箇所は1箇所で済みます。一見するとこれはスタイルの定義を一箇所にまとめているように見えがちですが、ひとたびCSSにコンパイルされてしまえば、そのスタイルはMixin名を記述した箇所すべてにコピーされるため、結果的に定義が重複しているのと変わりありません。それによってソースコードが肥大化するのは決してスマートとはいえないです。純粋にCSSコーディングする際は同一のスタイル定義を重複させないためにクラス名の付与は入念にするものですが、LESSにおいてもそのスタンスは守るべきかと思います。

おわりに

手軽さを売りにしている反面、機能としては限定されたものに落ち着いているLESSですが、導入ハードルの低さや学習コストの観点からすると、非常に魅力ある言語といえます。現に私もこれといって「覚える」ということをしていませんが、基本的な作法を習得するのにさして時間はかかりませんでした。急な開発で従来の知識をそのまま活かしつつ効率化を図りたいという方にはうってつけの言語かと思います。また、より高機能なSCSS(Sass)にステップアップするための準備段階として触れてみるのも良いかもしれません。