※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事のおまけです。

CSSプリプロセッサ（CSSメタ言語）は、Sassが人気かつ、アップデートも頻繁、新機能増えてる！みたいな空気を感じたりするんですが、LESSもがんばってます。

開発の停滞

5ヶ月ほど前にCrunchというLESS対応エディタを開発しているMatthew Dean氏が、

LESSの開発止まってますやん。それに比べてSassはめっちゃ更新してんで。

Is LESS in need of support?

というissueをあげた。

それに対し、開発者のAlexis Sellier氏（cloudheadコメントをあげた。

他にやることあるから、今LESSに割く時間ありませんわー（略）

https://github.com/cloudhead/less.js/issues/867#issuecomment-7036574

なんていうこともあったものの、agatronic氏を中心に、LESSを愛する有志たちによって、現在ぼちぼちとメンテされている様子。

最近のLESS

最近のLESSの話題の目玉としては、アドベントカレンダー初日に@hokacchaが書いてくれた、LESSにおける@extendの機能でしょうか。

SassがLESSに大きく差をつけた機能のひとつではあるのですが、これをなんと我らが@hokacchaが書いてくれたわけです。そこにシビれる、あこがれる。

その進捗などは先の記事を見ていただくとして、他にアップデートされているものを少し紹介していく。

CHANGELOGの1.3.1（2012-10-18 アップデート）から色々と追加された色関係のfunctionをピックアップ。 （強化するのはそこの機能じゃないんじゃ、という気もしないでもないですが）

色関係の関数が盛りだくさん。

追加されたのは下記。

• red
• green
• blue
• tint
• shade
• multiply
• screen
• overlay
• softlight
• hardlight
• difference
• exclusion
• average
• negation
• contrast

この中から後半部分のBlending modesと呼ばれるFunctionをいくつかピックアップする。Blending modesは、Photoshopでいうところのレイヤーの描画モードみたいなものだ。おそらくPhotoshopのUIの言語設定を変えれば、これらの単語が表示されるはず。今回紹介するものがそれらツールとまったく同じアルゴリズムかはわからないが、おそらくはこれらを元にしてつくられたFunctionではないかとおもう。

これらのFunctionは、第一引数と第二引数の色を掛け合わせるなどしてブレンドする。

multiply

Photoshopでいうところの乗算。

div {
  background-color: multiply(@colorA,@colorB);
}

screen

Photoshopでいうところのスクリーン。

div {
  background-color: screen(@colorA,@colorB);
}

overlay

Photoshopでいうところのオーバーレイ。

div {
  background-color: overlay(@colorA,@colorB);
}

hardlight

Photoshopでいうところのハードライト。

div {
  background-color: hardlight(@colorA,@colorB);
}

difference

Photoshopでいうところの差の絶対値。

div {
  background-color: difference(@colorA,@colorB);
}

average

Photoshopでは存在しないかもしれないが、Fireworksでいうところの平均。

div {
  background-color: average(@colorA,@colorB);
}

一応サンプル

StyleDoccoでつくったサンプルページも用意しておく。StyleDoccoについてはこちらを参照してほしい。¹

続きはCSS Nite LP26で！（たぶん）

2013年1月12日（土）に開催される、CSS Nite LP, Disk 26「CSS Preprocessor Shootout」ではLESSについての話をする予定なので、本記事で紹介しなかった関数も紹介するかもしれません。しないかもしれません。

残席残りわずかなようですが、興味がある方はぜひ。