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を読込み、コンパイルします。このテストページへのリンクはページ下側にあります。
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;
}
}
}<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>
