今年も始まりましたAdvent Calendar。このエントリーはCSS Preprocessor Advent Calendar 2012の一日目です。

去年はLess & Sass Advent calendarというのをやりましたが、今年はSassやLessだけじゃなく、Stylusなども含めてCSS Preprocessorというくくりにしてみました。まだ最後のほうに空きがあるので我こそはと思われる方はぜひ参加してみてください。

また、Advent Calendarとは関係ないですが、CSS Preprocessor JPというグループをつくったので興味がある人はぜひ参加してみてください。Sassのインストールの仕方がわからないとか、最近はどういうのが流行ってるかなど意見交換の場にしてもらえればと思っています。きっとAdvent Calendarの参加者の人たちあたりがビシッと教えてくれるはずです。

さて本題。去年のAdvent CalendarのときにLessにextendを実装してみたんですが、しばらくとりこまれる気配がなくて、最近になって開発がさかんになり、1_4_0ブランチに取り込まれました。

cloudhead/less.js at 1_4_0

取り込まれてからもシンタックスに関する議論が活発に続いており、紆余曲折ありましたが、今は以下の様なシンタックスに落ち着いたようです。（が、まだ変わる可能性はあります）

.foo {
  color: red;
}

.bar {
  &:extend(.foo);
  font-size: 13px;
}

これをコンパイルすると次のようになります。

.foo,
.bar {
  color: red;
}
.bar {
  font-size: 13px;
}

最初僕が実装したときは+.fooみたいなシンタックスだったんですが、隣接セレクタみたいでわかりにくいということで++.fooになって、それもやっぱ微妙だねということで&:extend(.foo)のようになったみたいです。

たしかにわかりやすいとは思うけどLessっぽくはないなあと思いつつ、Lessらしさが何なのか語れるほどLessを使ってないので議論には参加してません。

このくらいライトな記事でもいいのでぜひAdvent Calendarに参加してみてください！