LESSにextendを実装してみた

Less & Sass Advent calendar 2011の14日目です。LESSにextendを実装したので紹介。

LESSはSassに比べて機能が少ないです。その中でもよくLESSにはextendがないのが困るというのを聞くので実装してみました。

SassのextendについてはAdvent Calendarでも後ほど誰かが紹介してくれると思いますが、こんな感じです。
Sassの@extendでCSSとHTMLをシンプルに - あと味

LESS版はこんな感じで書けます。

.foo {
    width: 100px;
}

.bar {
    +.foo; /* この + ってのがSassでいうところの @extend */
}

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

.foo, .bar {
  width: 100px;
}

いいですね。よく使いそうなのがclearfix的なやつだと思います。

.clearfix {
  *zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
  }
}

.foo {
  +.clearfix;
  color: red;
}

.bar {
  +.clearfix;
  color: blue;
}

これはこうなります。

.clearfix, .foo, .bar {
  *zoom: 1;
}
.clearfix:after, .foo:after, .bar:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
.foo {
  color: red;
}
.bar {
  color: blue;
}

mixinと似てるんですけど最終的なコード量が減っていいですね。

本家には取り込まれてないので、試してみたい人は僕のリポジトリからインストールしてみてください。

$ npm install https://github.com/hokaccha/less.js/tarball/1.1.5-extend_patch

pull requestもちゃんと見てくれてコードにコメントとかもくれてるのでもしかしたら近いうちにとりこまれるかも？
Add Sass like extend by hokaccha · Pull Request #509 · less/less.js · GitHub

あんま本文とは関係ない話しですけど、SassもLESSもオープンソースなんだから足りない機能とかバグはどしどし報告しちゃいましょう。コード書いてPull Requestしなくてもいいんで、こんなバグあったよ、とか、こんな機能あるといいと思うよ、みたいな感じでissue上げるだけでも全然いいと思います。オープンソースのプロジェクトは使ってる人がフィードバックしてこそ育つものです。