ネスト（階層）化できる

たとえばこんなCSSがあります。

css

	div.section {
		width: 500px;
		margin: 0 auto;
		border: solid 1px #999;
		padding: 1px;
	}
	div.section h3 {
		background: #999;
		font-size: 131%;
		padding: 10px;
	}
	div.section h3 a {
		color: #fff;
	}
	div.section h3 a:hover {
		color: #eee;
	}
	div.section p {
		padding: 10px;
	}

「div.section」の子にスタイルを適用したい場合、すべてのセレクタが「div.section」から記述しなくてはいけないのでめんどくさいと誰もが思いますよね。
LESSで書けば次のように書けます。

less

	div.section {
		width: 500px;
		margin: 0 auto;
		border: solid 1px #999;
		padding: 1px;
		h3 {
			background: #999;
			font-size: 131%;
			padding: 10px;
			a {
				color: #fff;
				&:hover {
					color: #000;
				}
			}
		}
		p {
			padding: 10px;
		}
	}

これだけでも使う意味が十分ありそうですね。

変数を使うことができる

変数とは何でも入る箱のようなものです。
たとえばカラーとかパディングとか統一している場合、変数で指定しおけば簡単に全体の値を変更することができます。

css

	h3 {
		background: #eee;
		padding: 10px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	p {
		background: #eee;
		padding: 10px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}

変数は頭に「@」をつけるだけです。

less

	@radius: 5px;
	@bg-color: #eee;
	@pad: 10px;
	
	h3 {
		background: @bg-color;
		padding: @pad;
		border-radius: @radius;
		-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
	}
	p {
		background: @bg-color;
		padding: @pad;
		border-radius: @radius;
		-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
	}

関数っぽいことができる

LESSには「Mixins」というスタイルをまとめておいて使用できる、プログラムでいうと関数のようなこともできます。
先ほどの変数のコードを「Mixins」にすると次のようになります。

less

	.rounded-corners (@radius: 10px, @bg-color: #eee, @pad: 10px) {
		background: @bg-color;
		padding: @pad;
		border-radius: @radius;
		-webkit-border-radius: @radius;
		-moz-border-radius: @radius;
	}
	h3 {
		.rounded-corners;
	}
	p {
		.rounded-corners(20px, #999, 30px);
	}

引数もあたりまえのように使えますね。

css

	h3{
		background:#eeeeee;
		padding:10px;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	}
	p{
		background:#999999;
		padding:30px;
		border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
	}

ちょっとした計算ができる

このあたりになるとあまり使い道なさそうですが、計算することもできます。

less

	@bg-color: #842210;
	@pad: 10px;
	h3 {
		background: fadeout(@bg-color, 20%);
		padding: @pad+10;
	}
	p {
		background: fadeout(@bg-color, 50%);
		padding: @pad+20;
	}

css

	h3{
		background:rgba(132, 34, 16, 0.8);
		padding:20px;
	}
	p{
		background:rgba(132, 34, 16, 0.5);
		padding:30px;
	}

「fadeout」の部分は計算っていうのとはちょっと違いますが、色を制御する関数もいろいろそろっているようです。

LESSの使い方

この便利そうなLESSですが、そのままですと当然ブラウザは認識しません。
で、どのように使うのかといいますと次の方法があります。

  1. Node.jsなどサーバーサイドで動的になんとかする。
  2. ツールを使用してCSSに変換する。
  3. JSを使う。

1のサーバーサイドの関係はパスさせていただいて、一番簡単なのは3のJSで使用する方法です。
下記公式サイトのjsファイルがあります。

LESS « The Dynamic Stylesheet language

あとはこのようにしてLESSとして書いたファイルを読み込ませます。

	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>

テストの段階ではこれでもいいかもしれませんが、jsを実行できない環境もあるので本番もこれでいくのはあれですね。
なので最終的にはツールを使用してCSSに変換するのが確実だと思います。

[ オンラインツール ]
LESSTESTER – Online Compiler fo Less CSS
[ Air製のクロスプラットフォームなコンパイラ ]
Less Parser
[ Mac用でSASS, SCSSにも対応しているようです（すごく便利そう！） ]
CodeKit