楽しいCSSこと「Sass」の3.1が異様な進化
HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。
Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。
Hamlのほうは、今回はSassの分離が大きなトピックである以外は変化はありません。変化が大きいのは「Brainy Betty」と名付けられたSass 3.1.0のほうです（brainyって脳みそが詰まっていて頭が良いという意味ですね。変な名前を付ける人たちです……。Sass自体も、生意気な女という意味で使われる「sassy girl」にかけているんだと思います）。
Rails 3.1にはSassの弟分のSCSSが標準で入り、SassもHamlも選外（？）となりました。恐らく学習コストや扱いやすさ、既存のCSSとの互換性などを考えてのことだと思います。そうしたバランスを考えなくていいからか、Sassは妙に機能強化されている印象です。
例えば、Sassでは元々関数が定義できますが、これがSassファイル内で可能となりました。
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
これはグリッドの各セルの幅を、セルの個数で動的に決めるという関数ですね。CSSとはエラい違いです。関数の中では条件分岐の「@if」というディレクティブも使えます。
変数定義が可能で、関数定義や条件分岐もできるCSSというだけでも「極まってる」感がありますが、さらに今回、データ形式としてリストもサポート。CSSには「Helvetica, Arial, sans」とか「0px 10px 5px 10px」など、元々リスト的なデータ構造がありますが、こうしたデータに対して、
- nth($list, $n)
- join($list1, $list2)
- append($list, $val)
- length($list)
などの関数が使えるようになりました。リスト型ができたので、eachも定義されました。
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
と書けば、
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
とコンパイルされます。CSSは繰り返しが多くなりがちで、こういうプログラミング的なアプローチがあるといいですよね。
色の扱いについても、RGB値を反転させるinvertや、色の明るさを変える「adjust-color($color, $lightness: 10%)」なども増えているようです。