Sass 3.5 リリース 候補

2016年8月30日投稿者: Natalie Weizenbaum

Sass 3.5.0-rc.1 のリリースボタンを押しました。前回のリリースから時間が空いたように思われるかもしれませんが、その通りです！しかし、良い理由があります。Sass の超高速 C++ 実装である libsass が Sass 3.4 との機能パリティに到達する時間を与えるため、3.5 リリース後に機能フリーズに入ると決定しました。Libsass は Sass よりはるかに若く、C++ は一般的に Ruby よりも作業が遅い言語であるため、これには時間がかかりました。しかし、それは報われました。libsass は現在、Ruby Sass とほぼ 100% 互換性があり、わずかなバグだけが異なります。

機能フリーズが解除された後、私たちは主に Sass 4.0 の中心となる機能となる新しいモジュールシステムの設計に焦点を当てていました。しかし、いくつかの新機能を追加する時間も見つかり、これが今回のリリースの焦点となっています。

CSS カスタムプロパティのサポートCSS カスタムプロパティのサポート パーマリンク

Sass 3.5 は、CSS カスタムプロパティ を完全にサポートするようになりました。これらのプロパティは、カスタムプロパティの構文が非常に広範であるため、私たちにとって特に困難な課題でした。右辺にはほぼ何でも入れることができます。たとえば、これは完全に有効で意味のある CSS です。

.wacky-property {
  --property: .%(#@$~`^[^_+]<;:"}"|?)*+;
}

特に、これは SassScript 式も有効な CSS であることを意味し、CSS 互換性の目標にとって問題となります。可能な限り、有効な CSS は Sass と CSS の両方で同じ意味を持つようにしたいと考えています。そのため、3.4 で行ったように、カスタムプロパティを通常のプロパティと同様に扱うことは良い解決策ではありませんでした。有効な CSS の一部が異なる解釈を受け、その一部は不可能でした。Polymer のドキュメントから直接取得した次の CSS は、Sass では表現することがほとんど不可能でした。

:host {
  --my-toolbar-theme: {
    background-color: green;
    border-radius: 4px;
    border: 1px solid gray;
  }
}

一方、カスタムプロパティに動的な SassScript 値を含めるための方法が必要でした。そこで、妥協案として、カスタムプロパティをセレクタや @ルール値と同様に扱い、Sass 値を含める手段として #{} のみを許可することにしました。技術的にはこれはプレーンな CSS ですが、非常に小さな領域であり、非常に簡単にエスケープできるため、あまり心配していません。これは、3.5 では 次のように記述できることを意味します。

:host {
  --my-toolbar-theme: {
    background-color: #{$toolbar-background};
    border-radius: 4px;
    border: 1px solid gray;
  }
}

新しいデータ型: 一級関数新しいデータ型: 一級関数 パーマリンク

Sass 4.0 で提供されるモジュールシステムの準備として、3.5 には新しいデータ型である一級関数が追加されました。これは、単なる名前ではなく、より具体的な関数を参照する方法です。一級関数は、その名前を get-function($name) に渡すことで取得でき、関数名を渡していた場所に call() に渡すことができます。

「なぜこれが役に立つのか？関数名を渡すことはすでにできていた。」と疑問に思うかもしれません。さて、現在、Sass はグローバルスコープを持っています。すべての関数（変数、mixin、セレクタも同様）は、後で実行されるコードから見えます。これにより、call() のようなものが簡単になりますが、多くの問題も引き起こします。他の場所で定義された変数や関数を誤って上書きすることは非常に簡単であり、特定の名前が最初に定義された場所を把握することは非常に困難です。

4.0 モジュールシステムの計画について広く話す準備はまだできていませんが、確信していることの1つは、グローバルスコープを使用しないということです。各 Sass ファイルは、定義された名前の限定的な数しか認識できず、特に Sass ライブラリは、それらをインポートするエンドユーザーのスタイルシートで定義されたものは何も認識できません。一級関数により、ユーザーは自分で定義した関数をライブラリに渡すことができます。

現在関数名を文字列としてやり取りしているスタイルシートは、代わりに一級関数に切り替える必要があります。この目的のために、文字列で call() を呼び出すことは非推奨となりました。4.0 まで実際に壊れることはありませんが、それでもあまり役に立たなくなりますが、get-function() にすぐに切り替えることを強くお勧めします。

新しい構文: 角括弧付きリスト新しい構文: 角括弧付きリスト パーマリンク

新しい CSS グリッドレイアウト モジュールには、新しいタイプの構文が追加されました。角括弧で囲まれた識別子です。CSS と完全に互換性を持たせるために常に努力しているので、これらの角括弧もサポートする必要がありました。 CSS での表示方法は次のとおりです。

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

解決策は明確でした。Sass にはすでに リストデータ型 があるため、リストに角括弧を許可するだけです。したがって、[first] は、引用符なしの文字列 first を含むリストです。すべての Sass リストと同様に、角括弧付きリストはスペース区切りまたはコンマ区切りのいずれかになります。[foo bar baz] と [foo, bar, baz] はどちらも 3 つの要素を含むリストです。

角括弧付きリストの関数サポートも追加しました。is-bracketed($list) 関数は、リストが角括弧付きかどうかを返し、join() には新しい $bracketed パラメータがあり、呼び出し元は結果のリストに角括弧を含めるかどうかを選択できます（デフォルトでは、最初のリストが角括弧付きの場合、結果は角括弧付きになります）。

小さな機能小さな機能パーマリンク

現在の mixin にコンテンツブロックが渡されたかどうかを返す content-exists() 関数を追加しました。これにより、mixin はコンテンツブロックをオプションで受け取ることができ、コンテンツを受け取る mixin と受け取らない mixin を別々に定義する必要がなくなります。

引数リストに末尾のコンマを追加できるようになりました。これは、リストとマップの動作と一致します。

invert() 関数に $weight パラメータを追加しました。これは、結果の色を反転させる程度を示す 0% から 100% の間のパーセンテージです。デフォルトは 100% です。

リリースへの道リリースへの道 パーマリンク

これはリリース候補にすぎませんが、最終リリースとして出荷しても問題ない状態です。libsass との機能互換性を実現したので、それを維持することに尽力しているため、そうしていません。

残念ながら、Marcel Greter がプロジェクトから離れたため、libsass は最近かなりゆっくりと動いています。数千人に恩恵をもたらすプロジェクトに取り組むことに関心のある方、またはそのような知り合いがいらっしゃる場合は、引き続き新しい貢献者を募集しています。

libsass との互換性があるまで、3.5 はリリース候補レベルのままです。しかし、それを試してみて、ご意見をお聞かせいただければ幸いです！ メーリングリスト でのフィードバックを常に歓迎しています！