CSSの欠点というと冗長な記述があげられます。それがスタイルの記述場所の分かりにくさに繋がっています。その解決策のひとつとして、CSSプリプロセッサ(CSS拡張メタ言語・動的スタイルシート言語)の導入があげられます。

今回は、CSSプリプロセッサの中でももっとも取っ付きやすいLESS(Leaner CSS)について、作成したスタイルをローカル側で簡単に確認するためのコンパイルを試してみました。また、今回は、LESSの記法の中でもっとも基本となる構造化(ネスト)のみを使っています。

LESSをCSSにコンパイルするには、いくつか方法がありますが、サーバーサイドの力を借りることなくローカルで行うためにless.jsを使用します。なお、less.jsは新旧バージョンで構造が大きく違っていて、今回のテストでは古いバージョン(v1.4)を使い動作しますが、新しいv2.5ではうまくいきません。

今回のテスト:
外部ファイルとして、 次のテスト用LESS「less-test.less」を作成しました。これをCSSと同様にhtmlの<head>内にリンクします。そしてスタイルを適用するbodyの後ろで、less.jsを読込み、コンパイルします。このテストページへのリンクはページ下側にあります。

less-test.less

div.box01 {
	width: 583px; 
	margin: 15px auto; 
	padding: 0; 
	border: 1px solid;
	border-color: #999;
	.title {
		width: 550px;
		background-color: #ccff77;
		border-left: 8px solid #99cc44;
		margin:0;
		h2	{
			width: 540px;
			background: #ccff77;
			border-left: 2px solid #99cc44;
			color: #555;
			font-size: 22px; 
			margin: 0 0 0 3px;
			padding: 5px 15px;
			}
		}
	h3	{
		background: #fff;
		color: oranje;
		font-size: 16px;
		margin: 5px 0;
		padding: 3px 0 3px 10px;
		a 	{
			color: #bf1d12;
			text-decoration: none;
			}
		a:hover {
			color: orange;
			text-decoration: underline;
			}
		}
	ul	{
		margin:5px;
		li	{
			list-style-type: decimal;
			}
		}
	}

html(一部)

<head>
<meta charset="UTF-8">
<title>less.jsを使ったLESSの表示テスト</title>
	<link rel="stylesheet/less" type="text/css" href="less-test.less">
</head>
<body>
------中略-------
	<script src="less.js" type="text/javascript"></script>
</body>

テストページ(1)(新規タブ、または新規ウィンドウで開きます)

LESSのウェブサイト:http://lesscss.org/
戻るボタン