LESSとSass

Railsに直接関わる話ではないのですが、InfoQでLESS と Sass で CSS をより簡潔にするという記事を読みました。

LESS も Sass もねらいは同じ。CSS にネスティングや変数の概念を加えた新しい言語を生み出すことで、カスケーディングスタイルシートの作成をもっと楽にしよう、ということです。

LESS のサンプルコードがこれ。

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Sass のサンプルコードがこれ。

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

私の直感では、もし世の中に受け入れられるとすれば、確実に LESS です。Ruby プログラマーになじみ深い @ 記号で変数を表すことにした点、CSSを踏襲して中括弧({ })を使うことにした点、この2点だけで軍配が上がります。見慣れない記号や記法を広く普及させるのは簡単なことではありません。

参考資料

• Sass and Less (nex-3.com) --- Haml と Sass の作者 Nathan Weizenbaum のブログ。