前回、InfoQでSassスタイルシート言語を紹介した時、プロジェクト管理者のNathan Weizenbaum氏はインデントしたシンタックスに加えて、CSSのような括弧のシンタックスを提供するSassをリリースすることを約束していた。Haml/Sass 3は、5月10日に予定された最終リリースに近づいている。このリリースでは、主な特徴としてSassのシンタックスが変更される。
バージョン3がSassに注目していることは疑いようがありません。Hamlも確かに大切にしていますが、このリリースがSassのためでなければきっとバージョン2.4だったでしょう。Hamlはすでに安定していますから。
新しいSassシンタックスは、SCSS(Sassy CSS) と呼ばれる。SCSS はCSS3の上位セットだ。
これは、SCSSがCSS3と100%互換性のあることを意味します。有効なCSS3ドキュメントは有効なSCSSドキュメントであり、同じものとして扱われます。さらに、SCSSは私たちが見つけられる全てのハックスやベンダ拡張をサポートします。これには、マイクロソフトのexpression()ファンクションやfilterプロパティのような標準的ではない風変りなシンタックスも含まれます。
変数、操作、ネストセレクタ、ミックスインなどのスタイルシートの拡張に関するSassの基本機能に対する変更はない。シンタックスの変更によって、CSSとのシンタックスの相違をできるだけ少なくし、Sassに新しいユーザーを引き付けようとしている。追加された利点は、CSSツールがSassをサポートしやすくなることだ。
Sassのオリジナルのインデントしたシンタックスは利用可能であり、これらのシンタックスを使いたい人たちのために引き続きサポートされる。しかしながら、SCSSにCSS3との互換性を持たせた結果、Sassのあるシンタックス上の特徴を軽視することとなった。変数の前に付ける「!」は「$」に変わり、値の設定に使う「=」は「:」になった。引用符で囲まれた文字列を解釈する方法も変更された。
Sassのもう1つの新しい主要な機能は、 1つのセレクタが他のセレクタのスタイル全てを引き継げる @extend 指示だ。
ページをデザインしている時に、1つのクラスで、独自のスタイルと共に他のクラスのすべてのスタイルを持たなければならない場合がよくあります。こういう場合にもっともよく使われる方法は、HTMLの中でより一般的なクラスと独自のクラスの両方を使うことです。
[...]
残念ながら、これは、.seriousErrorと共に.errorを使うことをいつも覚えていなければならないということです。これではメンテナンスが大変になり、知らぬ間に不具合を生み出し、マークアップにセマンティクスに反するスタイルをもたらす可能性があります。
[...]
@extendは、.errorなどの拡張されたセレクタが現れるスタイルシートのどこにでも.seriousErrorなどの拡張しているセレクタを挿入することで機能します。
[...]
xCSSは、今までCSSコンパイラの中で完全にセレクタを継承するものに一番近いものでした。しかしながら、xCSSは完全な継承には重大なコンポーネントが不足しています。.seriousErrorは、セレクタが.errorの時にだけ追加され、.error.intrusionや.admin .error.の時には追加されません。
Sass 3 は、また、Sass 2からSass 3シンタックスへの変換と共に、CSS、Sass、SCSS間のファイル変換ユーティリティを取り入れている。
Sass::Pluginは、Sassファイルが変更された時にCSSファイルを更新するもので、新しいリリースではパフォーマンスが改善されている。さらに、この自動更新機能は、--watchという新しいフラグを通してsassコマンドラインユーティリティで利用できる。
Hamlへの変更には、 HTML 5のカスタムデータ属性の生成と複数行シンタックスの簡略化が含まれる。