less
LESS　http://lesscss.org/

CSS記述時のフラストレーションを、劇的に軽減してくれそうな仕組みが登場しました。
CSSを拡張した「LESS」です。

半年以上前から存在するようです。下記サイトの説明が、非常にわかりやすいです。
extends CSS ? LESS - Learner CSS（の和訳）- kmxslog

LESS を使えば、変数や入れ子構造で CSSコードをすっきり記述できます。
CSSが書ける人は、いくつかのルールを覚えるだけで、すぐにLESSのコードを書けるでしょう。
CSS3もサポート。Mac、Windows、Linux、いずれでも使えるようです。

主なメリットは・・・

  • 変数が使える。複数箇所で使う文字列などを変数にすると使い回しできてスッキリ。
  • 構造化して記述できる（特定のセレクタの指定を別のセレクタ内の記述に埋め込んだり、入れ子構造で書けたり）。

WEBブラウザは LESS のコードを解釈できません。
LESSのコード を CSS にコンパイルする必要があります。

文章の説明だけだとイメージしにくいと思いますので、 実際のコードで見てみましょう。

次は、LESSのコードです。コード内のコメントに説明を書いています。


/* - - - - LESS - - - - */
/* コンパイル後、コメントは消える */
/* - - - - - - - - - - - - -  - - -
  変数
 - - - - - - - - - - - - - -  - - */
@brand_color: #4D926F; /*変数は頭に"@"を付ける*/
#header { color: @brand_color; } /*コンパイルすると変数が代入される*/
h2 { color: @brand_color; } /*同上*/
/* - - - - - - - - - - - - - - - -  
  特定セレクタの設定を使い回す
 - - - - - - - - - - - - - - - - */
/*クラス bordred の設定を使い回す例 */
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered; /*コンパイルすると .bordered のプロパティと値が展開される*/
}
.post a {
  color: red;
  .bordered; /*同上*/
}
/* - - - - - - - - - - - - -
  入れ子構造
 - - - - - - - - - - - - - */
/* インデントを入れると一目で構造がわかる */
#header {
  color: black;
  .navigation { /*コンパイルすると #header .navigation に変換*/
    font-size: 12px;
  }
  .logo { /*コンパイルすると #header .logo に変換*/
    width: 300px;
    :hover { text-decoration: none }
  }
}

上記コードに拡張子「.less」を付け保存した後、コンパイルすると、下記の CSSファイルが生成されます。


/* - - - - CSS（実際はこのコメントはない。説明用） - - - - */
#header, h2 { color: #4d926f; }
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#header { color: black; }
#header .navigation { font-size: 12px; }
#header .logo { width: 300px; }
#header .logo:hover { text-decoration: none; }

見事にCSSに変換されます。
ショートハンド記述にできるものは、ショートハンド記述にしてくれるようです。
LESS ファイルを保存するとき自動で CSS にコンパイルする機能も付いていますので、WEBブラウザや Dreamweaver や Coda などでプレビューを確認しながらの作業も大丈夫です。

LESSコンパイラ のインストール

コンパイルには、Ruby と Rubyのライブラリ管理ツール「RubyGems（コマンド名はgem）」を使うため、事前にインストールが必要です。

  1. Ruby と RubyGems をインストール。Mac OSX には標準で入ってます。
  2. LESS のインストール。Mac の場合、ターミナルでコマンド "sudo gem install less"。以上でコマンドラインからコンパイルできるようになります。
    LESSのインストール

「LESS.app For Mac OSX」のインストール（Mac OSXの場合）

Mac OSX には、ドラッグ＆ドロップで LESS を CSS にコンパイルしてくれるアプリケーション「LESS.app For Mac OSX」が用意されています。ダウンロードして解凍すると、アプリケーション本体ができるので、アプリケーションフォルダに移動してください。

コンパイルの仕方

ターミナルからのコマンドライン入力

$ lessc ファイル名　例）$ lessc style.less

その他のコマンドはこちらを参考にしてください。

「LESS.app For Mac OSX」を使ってコンパイル（Mac OSXのみ）

  1. アプリケーションを起動し、lessファイルを含むフォルダをパネルにドラッグ＆ドロップします。
    LESS Mac OSX_1
  2. コンパイル画面に切り替えてボタンを押すと、CSSファイルを生成してくれます。「Automatically compile files when saved」にチェックを付けておくことで、LESS ファイルを保存するときに自動で CSS にコンパイルしてくれます。
    LESS Mac OSX_2

Twitterで「神からWEBデベロッパーへのギフト」という賞賛の声もありました。
この記事では紹介していませんが、変数を使って計算したり、名前空間できめ細かい指定をしたりと高機能です。
本当に業務で使えるものかどうか、実際使って試してみようと思っています。

本家サイトへのリンク