Sass 3.4 が リリースされました

Sassのリリース頻度を上げようと試みており、どうやら成功したようです。 Sass 3.3 のリリースからわずか5ヶ月後、Sass 3.4.0（コードネーム：Selective Steve）のリリースを発表します。リリースが高速化するということは、1回のリリースあたりの主要機能が少なくなることを意味するため、今回お話する大きな新機能は2つしかありません（ただし、変更履歴には多くの小さな改善点が記載されています）。バージョン名が示すように、これらの機能はどちらもセレクターに関係しています。

SassScriptで&を使用するSassScriptで&を使用する パーマリンク

「SassScript」とは、Sassが変数、プロパティ値などで使用するミニ言語のことです。ほとんどがCSS値ですが、カスタム関数、算術などもサポートしています。Sass 3.4では、新しいものとして、親セレクター & のサポートを追加しました。

ほとんどのSassユーザーは、世界中のセレクターでの以前の外観から & を認識しているでしょう。これは、明示的に親セレクターを参照するために使用されます。たとえば、.parent { .child & { ... } } では、 & は .parent を参照し、これは .child .parent { ... } にコンパイルされます。

現在、& はSassScriptでもほぼ同じように動作します。同じ親セレクターを参照しますが、単にドロップインされるのではなく、関数が簡単に検査および操作できるようにリストのリストとして公開されます。たとえば、.foo .bar, .baz { $selector: & } と記述すると、 $selector は ((".foo" ".bar"), (".baz",)) になります。

この機能はもともとバージョン3.3に予定されていましたが、コンマを含むセレクターを使用すると、実際には機能が壊れてしまうことに気づき、削除しました。そのため、コンパニオン機能であるセレクター 関数を考案する時間を与えるために、1バージョン遅らせることにしました。

セレクター関数セレクター関数 パーマリンク

& を公開するだけでは、他のセレクターと組み合わせて使用​​する唯一の方法は、文字列として結合することでした。これは単純なケースでは問題ありませんが、#{$selector} .child と記述し、$selector が .foo, .bar の場合、.foo .child, .bar .child が必要ですが、.foo, .bar .child が得られます。これはまったく良くありません。

これを解決するために、Sassの強力な組み込みセレクターロジックを使用して適切な処理を行う多数の関数を追加しました。たとえば、selector-nest(".foo, .bar", ".child") と記述すると、まさに目的の結果が得られます。これらの関数はすべて、& が使用するのと同じ種類のネストされたリスト表現を返しますが、受け入れるものは非常に自由です。ネストされたリストからプレーンな古い 文字列まで、何でも受け入れます。

考案したすべてのセレクター関数を確認したい場合は、変更履歴をご覧ください。ただし、特に気に入っているものをいくつか強調しておきたいと思います。すでに selector-nest() をご覧になりましたが、selector-append() は密接な関係にあります。それらの違いは空白です。selector-nest() はセレクターの間にスペースを追加しますが、selector-append() は追加しません。つまり、selector-append(".foo, .bar", "-suffix") は .foo-suffix, .bar-suffix を返します。

もう1つ好きな関数は selector-replace() です。これは、別のセレクター内の1つのセレクターの検索と置換を実行しますが、基本的な文字列置換よりもはるかに賢いです。Sassの @extend ロジックを使用して、置換セレクターによって一致するすべての要素が、置換されたセレクターによっても一致するように、セレクターを意味的に置換します。たとえば、selector-replace(".foo.bar.baz", ".foo.baz", ".qux") は .bar.qux を返します。

注目してほしい最後に本当に強力な関数は selector-unify() です。これは2つのセレクターを取り、両方の入力セレクターによって一致する要素のみに一致する新しいセレクターを返します。これはSassが内部で頻繁に使用する操作であり、ユーザーもアクセスできるようになりました。たとえば、selector-unify(".foo.bar", ".bar.baz") は .foo.bar.baz を返します。

次は何ですか？次は何ですか？ パーマリンク

Sass 3.5 が存在する可能性を排除するつもりはありませんが、Chrisと私はSass 4.0にかなり集中する予定です。4.0の大きな機能は、@import、というよりむしろそれの欠如になるでしょう。現在のimportシステムは主要な点で古くなり始めており、名前を含めて全面的に置き換える予定です。4.0以降、他のSassファイルを取り込む推奨方法は @use になります。

@use で計画している機能の中には、広くリクエストされている2つの機能があります。CSSスタイルシートをSassスタイルシートに直接インポートできるようになり、各スタイルシートはインポートされた回数に関係なく、1回だけ実行されます。

それまでは、gem update sass を実行して、Selective Steveをお楽しみください！