モジュールシステムが リリースされました
2019年10月2日投稿者：Natalie Weizenbaum
Sass チームは長年、Sass に最も早く追加された機能の 1 つである@importルールが、私たちが望むほど優れていないことを認識していました。これは、私たちのユーザーに多くの問題を引き起こしていました
-
特定の変数、mixin、または関数（まとめて「メンバー」と呼びます）が最初に定義された場所を特定することはほぼ不可能でした。なぜなら、1 つのスタイルシートで定義されたものは、その後でインポートされたすべてのスタイルシートで使用可能だったからです
-
使用したメンバーを定義したすべてのスタイルシートを明示的にインポートすることを選択した場合でも、スタイルシートはインポートされるたびに最初から再読み込みされるため、重複したCSSと奇妙な副作用が発生します
-
簡潔で単純な名前を使用するのは安全ではありませんでした。なぜなら、アプリケーションの他の場所で別のスタイルシートが同じ名前を使用し、ロジックを混乱させる可能性が常にあったからです。安全を期すために、ユーザーは定義したすべてのものに長く扱いにくい名前空間を手動で追加する必要がありました
-
ライブラリの作成者は、プライベートヘルパーがダウンストリームユーザーによってアクセスされないようにする手段がなく、混乱と下位互換性の 問題を引き起こしていました。
-
@extendルール
また、導入したい代替策は、Sass 開発の将来のための堅牢な基盤を提供するように、細心の注意を払って設計および開発する必要があることも認識していました。過去数年間にわたり、これらの問題などを解決するまったく新しいモジュールシステムについて議論、設計、開発を行い、本日、Dart Sass 1.23.0 で利用可能になったことを発表できることを嬉しく思います。
モジュールシステムは完全に下位互換性があります。既存の機能は削除または非推奨になっておらず、現在の Sass スタイルシートはこれまでどおりに動作し続けます。スタイルシートの作成者が段階的に移行できるように、モジュールシステムは@importと完全に相互運用可能@importを削除する
@use、モジュールシステムの中核@use、モジュールシステムの中核 パーマリンク
@useルール@importの主要な代替手段です。これにより、別のスタイルシートのCSS、変数、mixin、関数を現在のスタイルシートで使用できるようになります。デフォルトでは、変数、mixin、関数は、URLのベース名に基づいた名前空間で使用できます
@use "bootstrap";
.element {
background-color: bootstrap.$body-bg;
@include bootstrap.float-left;
}名前空間以外にも、@useと@importにはいくつかの重要な違いがあります。
@useは、スタイルシートが何回使用されても、スタイルシートを実行してそのCSSを一度だけ含めます@useは、グローバルではなく、現在のスタイルシートでのみ名前を使用できるようにします- 名前が
-または_で始まるメンバーは、@useを使用する現在のスタイルシートに対してプライベートです。 - スタイルシートに
@extendが含まれている場合、その拡張機能は、それがインポートするスタイルシートにのみ適用され、それをインポートするスタイルシートには適用されません
プレースホルダーセレクターは名前空間付けされませんが、プライバシーは尊重します
名前空間の制御名前空間の制御 パーマリンク
@useルールのデフォルトの名前空間はURLのベース名によって決定されますが、asを使用して明示的に設定することもできます。
@use "bootstrap" as b;
.element {
@include b.float-left;
}トップレベルの名前空間にすべてを含めるには、特別な構成as *を使用することもできます。複数のモジュールが同じ名前のメンバーを公開し、as *を使用して使用されている場合、Sass は エラーを生成します。
@use "bootstrap" as *;
.element {
@include float-left;
}ライブラリの構成ライブラリの構成 パーマリンク
@importを使用すると、ライブラリは、それらのライブラリによって定義された!default変数をオーバーライドするグローバル変数を設定することによって、多くの場合構成されます。@useでは変数がグローバルではなくなったため、ライブラリを構成するより明示的な方法がサポートされています。それがwith句です。
// bootstrap.scss
$paragraph-margin-bottom: 1rem !default;
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}@use "bootstrap" with (
$paragraph-margin-bottom: 1.2rem
);これは、評価する前にbootstrapの$paragraph-margin-bottom変数を1.2remに設定します。with句は、インポートされているモジュールで（またはそれによって転送された）定義されている変数のみを許可し、!defaultで定義されている場合のみ許可されるため、ユーザーはタイプミスから保護されます
@forward、ライブラリ作成者向け@forward、ライブラリ作成者向け パーマリンク
@forwardルール@useとは異なり、forward は名前に名前空間を追加しません
// bootstrap.scss
@forward "functions";
@forward "variables";
@forward "mixins";可視性の制御可視性の制御 パーマリンク
@forwardルールは、特定の名前のみを表示するように選択できます
@forward "functions" show color-yiq;ライブラリ専用にすることを意図した名前を非表示にすることもできます
@forward "functions" hide assert-ascending;追加のプレフィックス付け追加のプレフィックス付け パーマリンク
すべてを網羅したモジュールを介して子モジュールを転送する場合、そのモジュールに手動の名前空間を追加したい場合があります。as句を使用して行うことができます。これは、転送される各メンバー名にプレフィックスを追加します
// material/_index.scss
@forward "theme" as theme-*;これにより、ユーザーは、テーマ 変数に対してスコープが適切に設定された名前を使用して、すべてを網羅したモジュールを使用できます。
@use "material" with ($theme-primary: blue);または、より単純な 名前を使用して子モジュールを使用できます。
@use "material/theme" with ($primary: blue);組み込みモジュール組み込みモジュール パーマリンク
新しいモジュールシステムには、既存のすべての組み込み Sass 関数を保持する組み込みモジュール（sass:math、sass:color、sass:string、sass:list、sass:map、sass:selector、およびsass:meta）も追加されています。これらのモジュールは（通常）名前空間を使用してインポートされるため、プレーンCSS 関数と競合することなく Sass 関数を使用することがはるかに容易になりました。
これにより、Sass が新しい関数を追加することがはるかに安全になります。将来、これらのモジュールに多数の便利な関数を追加する予定です
名前が変更された関数名前が変更された関数 パーマリンク
一部の関数は、組み込みモジュールではグローバル関数として使用する場合とは異なる名前になっています。map-get()map.get()と記述するだけで済みます。同様に、adjust-color()scale-color()change-color()color.adjust()、color.scale()、およびcolor.change()になっています。
また、この機会に、いくつかの混乱を招く古い関数名を変更しました。unitless()math.is-unitless()であり、comparable()math.compatible()です。
削除された関数削除された関数 パーマリンク
Sass の短縮されたカラー関数lighten()、darken()、saturate()、desaturate()、opacify()、fade-in()、transparentize()、およびfade-out()は、非常に直感的な動作ではありませんでした。関連する属性をスムーズにスケーリングするのではなく、静的な量だけ増分していたため、lighten($color, 20%)は、明るさが85%の色に対してwhiteを返すのではなく、明るさが88%の色（完全に白い色にさらに20%近い色）を返すことになります
これを修正するための道を切り開くために、これらの関数（adjust-hue()を含む）は新しい組み込みモジュールには含まれていません。color.adjust()lighten($color, $amount)はcolor.adjust($color, $lightness: $amount)と同じです）。ただし、はるかに直感的であるため、可能であればcolor.scale()
将来的には、color.lighten()などの関数をcolor.scale()の短縮形として追加する予定です。
meta.load-css()meta.load-css() パーマリンク
新しいモジュールシステムには、新しい組み込みmixinであるmeta.load-css($url, $with: ())
@importとの互換性@importとの互換性 パーマリンク
Sass エコシステムは一晩で@useに切り替わるわけではないため、その間は@importと良好に相互運用
-
@importを含むファイルが@useされている場合、そのグローバル名前空間内のすべてのものは単一のモジュールとして扱われます。このモジュールのメンバーは、通常どおりその名前空間を使用して参照されます -
@useを含むファイルが@importされている場合、その公開API内のすべてのものが、インポートするスタイルシートのグローバルスコープに追加されます。これにより、ライブラリは、@useではなく@importするユーザーに対しても、エクスポートする特定の名前を制御できます。
ライブラリが既存の@import指向のAPI（必要な場合は明示的な名前空間付き）を維持できるようにするために、この提案では、@useではなく@importに対してのみ表示されるファイルもサポートされています。これらは"file.import.scss"と記述され、ユーザーが@import "file"と記述するとインポートされます。
自動移行自動移行 パーマリンク
新しいモジュールシステムのリリースと同時に、新しい自動 Sass 移行ツールもリリースされます。このツールを使用すると、ほとんどのスタイルシートを新しいモジュールシステムに自動的に移行するのが容易になります。Sass ウェブサイトの手順に従ってインストールし、アプリケーションで実行します
$ sass-migrator module --migrate-deps <path/to/style.scss>--migrate-depsフラグWebpack のを介してインポートされたファイルを自動的に取得しますが、node_modules構文--load-pathフラグ
マイグレーションツールに変更内容を実際に適用せずに確認したい場合は、--dry-run フラグ と --verbose フラグ の両方を指定してください。これにより、変更内容がディスクに保存されることなく出力されます。
ライブラリのマイグレーションライブラリのマイグレーション permalink
下流のユーザーが読み込んで使用することを目的としたSassライブラリーをマイグレーションする場合は、以下を実行します。
$ sass-migrator module --migrate-deps --forward=all <path/to/index.scss>--forward フラグ を指定すると、マイグレーションツールは @forward ルール を追加します。これにより、ユーザーは単一の@useでライブラリーで定義されているすべてのmixin、変数、および関数を引き続き読み込むことができます。
名前の競合を避けるためにライブラリーに手動で名前空間を追加した場合、--remove-prefix フラグ を渡すと、マイグレーションツールによって削除されます。--forward=prefixed を渡すことで、元のプレフィックスを持つメンバーだけを転送することもできます。
問題の報告問題の報告 permalink
マイグレーションツールは新しく、まだ改善の余地があります。問題が発生した場合は、GitHubで問題を報告してください！
今すぐお試しください！今すぐお試しください！ permalink
モジュールシステムはDart Sass 1.23.0の一部として利用可能です。今すぐインストールできます。
$ npm install -g sassあるいは、インストールページで、さまざまなインストール方法を確認してください！
今後の計画今後の計画 permalink
Sassチームは、エコシステムが新しいシステムにスムーズに移行できるよう、@useと@importが共存できる期間を長く確保したいと考えています。しかし、シンプルさ、パフォーマンス、そしてCSSとの互換性を高めるために、最終的には@importを完全に廃止することが目標です。そのため、@importのサポートを段階的に削減する予定です。
-
Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（2021年10月1日まで）に、@importと、モジュールを通じて行うことができるグローバルコアライブラリ関数の呼び出しを非推奨とします。 -
この非推奨化から1年後（2022年10月1日まで）、@importとほとんどのグローバル関数のサポートを完全に削除します。これには、すべての実装のメジャーバージョンリリースが含まれます。
つまり、@importと@useの両方が同時に使用できる期間は少なくとも2年間あり、実際には3年近くに及ぶ可能性があります。
2022年7月：LibSassが新しいモジュールシステムのサポートを追加する前に非推奨となったことを考慮し、@importの非推奨化と削除のタイムラインが後ろ倒しされました。現在、npmダウンロードによって測定されたユーザーの80％がDart Sassを使用するようになるまで@importの非推奨化を延期し、その後少なくとも1年間、おそらくそれ以上待ってから完全に削除する予定です。