LESSでCSSを作ろう

さて今回はLESSについて。LESSとはCSSにコンパイルできる簡易記法です。普通のCSSと同じような記述に加えて、変数やセレクトの入れ子、関数などさまざまな記法を提供してくれます。

• 英語公式：http://lesscss.org/
• 日本語：http://less-ja.studiomohawk.com/

lessは専用のJavascriptライブラリなどを使ってコンパイルしてCSSとして利用するようですが、そのままだと環境によってはうまく動かなかったりサーバ側に調整が必要だったりして面倒ですが、lesscというコンパイラを使ってCSSを生成することもできます。

• LESSC(画面下部のZIPです。exeのみの配布ですのでパスの通ったフォルダに突っ込んでおきましょう)：http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe

LESSのコンパイル処理を自動的に

さてこんなLESSですが、毎回lesscコマンドを使ったりするのはちょっと面倒です。でも、EclipseやBracketsを使えば「lessファイルを保存したときに自動的にcssを生成する」ということも可能です。

Bracketsの場合

Bracketsの場合、「LESS AutoCompile」という拡張をインストールします。Bracketsの拡張機能メニューからインストールします。

Eclipse

Eclipseの場合、Eclipseマーケットプレイスより、「Eclipse plugin for LESS」をインストールします（Eclipseマーケットプレイスは拡張のインストールより「Luna - http://download.eclipse.org/releases/luna 」の「一般用ツール＞マーケットプレイス・クライアント」よりインストールできます）。

結構便利。

さてちょっと書いてみる。

とりあえずまだまだ全然ですが少し書いてみました。

main.less

body {
  background-color: #bfbfbf;
  section{
    border-width: 8px;
    border-style: double;
    border-color: #555;
    height: ~"calc(50% - 16px)";
    float: left;
    width: 50%;
  }
}

とまあ、まだ「スコープをネストできるので便利ですよ」くらいしかやれてないのですが、覚え直すことがほとんどないのでCSSをもう知っている人ならすんなり入れるのがいいですね。とりあえず使ってみようかという気になります。

ちなみに注意点

上のCSSにも書いてありますが、calc()をlessファイル内に直接書いてしまうと、コンパイル時に計算されてしまい、予期したとおりの動作をしません(今回使おうとしているcalcは、CSS3で定義された関数です。実際に描画時に計算を行ってくれる便利な関数です)。

そのような場合、~"なんとかかんとか"と言う風に、前後をダブルクオーテーションかつ、先頭に~を付けます。上の場合calc(50% - 16px)という記述になります。