Sass は CSS と同様にモジュール化されています。
モジュール化は CSS でのインポートによって実現されますが、この 2 つは多少異なります。CSS はランタイムに参加します。つまり、実行中のプロセスには複数の CSS ファイルがあり、それらは import コマンドを通じてインポートされます。ただし、sass は実行時の状態ではなく、コンパイル時の状態です。つまり、実行する前に複数のモジュールに分割します。コンパイル後はファイルになります. 以上がcssとsassのモジュール化の違いでした！
sass でモジュール性を実現するには2 つの方法があります。1 つは@importを使用することで、もう 1 つは@useを使用することです。
まず @import について説明します。これは実行時構文とコンパイル時構文に分かれています。
ランタイム構文
scssコード:
コンパイルされた CSS コード:
@import URL ("xxx") は実行時の状態、つまり CSS コードであるため、コンパイル後も CSS コードのままです
コンパイル時の構文:
//common.scss
$color:red//index.scss
@import "./common.scss"
.foo{
color:$color
}コンパイル後:index.scss によって生成された CSS ファイルには common.scss のコードが含まれており、当然ながら CSS 変数を共通で使用できます。
このように @import "xxxxx" と記述しているので、ファイルをコンパイルするときに反映されます。
scss公式はimportの使用を推奨しておらず、将来的にはこの使用は破棄されると述べています。
一つ目の理由は、import は css 自体に付属しているので実行時に使用しても問題ありませんが、コンパイル時に使用するとコンパイル時かどうかを判断する必要があるため混乱を招きやすいです。実行時間は、インポート後に url() があるかどうかによって決まります。
2 番目の理由は、汚染を引き起こしやすいためです。プロジェクトでは必ず多数の scss モジュールを抽出することになりますが、モジュール内で異なる変数が定義されている可能性があり、これらの変数は名前の競合を引き起こしやすいです。たとえば、上記で 2 つの scss ファイルがインポートされ、$color 変数が定義されている場合、後者のファイルが前者のファイルを上書きし、エラーは報告されません。これには大きな危険が潜んでいます。
3番目の理由は、私有性がなく、輸出入がないことです。
したがって、上記の理由により、コンパイル時に @use を使用することをお勧めします。
@use の使用方法:
@use を使用してインポートされた scss ファイルには名前空間があり、インポートされたファイルの深さに関係なく、デフォルトでは最後のファイル名が名前空間になります。モジュールのすべてのメンバーは、この名前空間を通じてアクセスする必要があります。
@use でインポートした場合の対処方法を以下のように追加します 2 つの common.scss ファイルは別ディレクトリにありますが、デフォルトでは名前空間がファイル名にちなんで付けられるため、この時点で名前空間をカスタマイズする必要があります。
@use "./common.scss"
@use "./a/b/common.scss"@use "./common.scss" as a
@use "./a/b/common.scss" as b別の方法は * これは、scss ファイル内のすべてのメンバーがグローバルにエクスポートされるため、名前空間が存在しないことを意味します。(これを行うことはお勧めできません。名前空間を含むメソッドを使用することをお勧めします)
@use "./common.scss" as *
@use 書き込みでプライベート変数を設定する
変数 $ 記号と名前の間に - または _ を追加できます (内部使用と私的使用を示すために、命名方法自体にはフロントエンドで下線が引かれています)
//common.scss
$-n : 6;//或者 $_n : 6;このプライベート変数が外部で使用される場合、コンパイル時にエラーが報告されます。
@use './common.scss' as a;
.foo{
color : a.$_n;
}