機能ウォッチ: CSS インポートと CSS 互換性

2018年8月13日投稿 Natalie Weizenbaum

Dart Sass 1.11がリリースされ、いくつかの新機能が追加されました。これはエキサイティングな瞬間です。Dart Sassがリリースされて以来、初めての主要な新機能が言語に追加されたからです。また、提案からテスト、実装までの新しいプロセスを経た最初のリリースでもあります。

CSSインポートCSSインポートのパーマリンク

Dart Sass 1.11の最大の機能は、プレーンなCSSファイルのインポートのサポートです。これは長らく待ち望まれていた機能であり、当初は今後のモジュールシステムのリリースまで待つ予定でしたが、最終的には早期に実装することにしました。

@import "styles"と記述するだけで、styles.cssのようなCSSファイルをインポートできるようになりました。そのファイルはプレーンなCSSとして解析されるため、変数、mixin、または補間のようなSass機能は許可されません。定義されたCSSはスタイルシートの一部となり、他のスタイルと同じように@extendできます。

いくつか注意点があります。SCSSはプレーンなCSSのスーパーセットであるため、@import "styles.css"（明示的な拡張子付き）は、CSSの@importルールにコンパイルされます。SassコンパイルにCSSファイルをインポートする場合は、拡張子を省略する必要があります。

また、この機能はLibSassにはまだ完全に実装されていません。LibSassでは、CSSファイルをインポートしますが、SCSSとして解析され、すべての追加のSass機能が許可されるという古い動作がまだ残っています。この動作はまもなく非推奨となり、最終的にはDart SassのようにプレーンなCSS以外のものに対してエラーを生成するようになります。

CSS min() と max()CSS min() と max() のパーマリンク

Dart Sass 1.11では、CSSのmin()とmax()の数学関数もサポートされています。これらの関数に馴染みのない方のために説明すると、これらの関数はcalc()によく似ていますが、一連の値の最小値または最大値を返します。たとえば、width: max(50%, 100px)と記述すると、要素は親の幅の50%または100px幅のどちらか大きい方になります。

Sassにはmin()とmax()という名前の独自の関数があるため、これらのCSS関数を使用することは困難でした...しかし、今ではそれが可能です。Dart Sass 1.11は、動的なSassの値を渡すかどうかに基づいて、プレーンなCSS関数を使用するか、組み込みのSass関数を使用するかをインテリジェントに決定します。例を挙げると、

  • 変数（max($width, 100px)など）を渡すと、Sass関数が呼び出されます。
  • 別のSass関数（max(compute-width(), 100px)など）を呼び出すと、Sass関数が呼び出されます。
  • max(50% + 10px, 100px)のように、プレーンなCSS数値を使用すると、プレーンなCSS関数にコンパイルされます。
  • max(50% + #{$width / 2}, #{$width})のように、補間を使用した場合でも、プレーンなCSS関数にコンパイルされます。

これにより、Sass関数の既存の使用法との下位互換性が維持されると同時に、ユーザーがプレーンなCSSと同じようにCSS関数を使用できるようになります。

この機能は、LibSassまたはRuby Sassにはまだ実装されていません。

範囲形式のメディアクエリ範囲形式のメディアクエリのパーマリンク

CSS メディアクエリレベル4では、特定のメディアクエリを定義するための範囲構文を定義しています。

@media (width > 500px) {
  /* ... */
}

Dart Sass 1.11では、この構文がサポートされています。既存のメディアクエリサポートと同じように動作します。補間またはプレーンなSass式を使用してSassロジックをクエリに挿入でき、それらは入れ子にすることもできます。

@media (width > $width) {
  @media (height < #{$height}) {
    /* ... */
  }
}

この機能は、LibSassまたはRuby Sassにはまだ実装されていません。

正規化された識別子のエスケープ正規化された識別子のエスケープのパーマリンク

最後の互換性の改善は少しエッジケースですが、それでも言及する価値があります。Sassが識別子のエスケープを解析する方法が、CSS仕様によりよく一致するように改善されました。

エスケープは標準形式に正規化されるようになりました。つまり、たとえば、éclairと\E9clairは同じ値（この場合はéclair）として解析されます。この変更の前は、エスケープが記述されていた場合、常にそのまま保持されていたため、str-length(\E9clair)は、その識別子がCSSにとってéclairとまったく同じ意味であるにもかかわらず、8を返していました。

これが多くのユーザーに影響を与えるとは予想していませんが、SassをCSSのセマンティクスにできる限り近づけるよう常に努力しています。これは、そのパスにおける小さくても重要なステップです。

この機能は、LibSassまたはRuby Sassにはまだ実装されていません。