@IT編集部の西村賢がRuby/Rails関連を中心に書いています。

楽しいCSSこと「Sass」の3.1が異様な進化

»

 HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。

 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエンジン。SassはHamlとセットで誕生した、インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語です。CSSを書くのが苦痛じゃなくて、楽しくなるという触れ込みです。

Sass

 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%)」なども増えているようです。

Comment(0)

コメント

コメントを投稿する