Sass は CSS コードを DRY (Don'trepeat Yourself) に保ちます。 DRY コードを記述する 1 つの方法は、関連するコードを別のファイルに保存することです。

CSS スニペットを含む小さなファイルを作成して、他の Sass ファイルに含めることができます。このようなファイルの例としては、リセット ファイル、変数、色、フォント、フォント サイズなどが挙げられます。

Sass ファイルのインポート

CSS と同様に、Sass もサポートしています。@import指令。

の@importディレクティブを使用すると、あるファイルの内容を別のファイルに含めることができます。

CSS@importディレクティブにはパフォーマンスの問題による大きな欠点があります。呼び出すたびに追加の HTTP リクエストが作成されます。しかし、サスは、@importディレクティブには CSS にファイルが含まれます。そのため、実行時に追加の HTTP 呼び出しは必要ありません。

ヒント：ファイル拡張子を指定する必要はありません。Sass は自動的に .sass または .scss ファイルを意味するとみなします。 CSS ファイルをインポートすることもできます。の@importディレクティブはファイルをインポートし、インポートされたファイルで定義されている変数またはミックスインをメイン ファイルで使用できるようになります。

必要なだけファイルをメイン ファイルにインポートできます。

例を見てみましょう: 次のような「reset.scss」というリセット ファイルがあると仮定します。

次に、「reset.scss」ファイルを「standard.scss」という別のファイルにインポートします。

その方法は次のとおりです。@importファイルの先頭にあるディレクティブ。このようにして、そのコンテンツはグローバル スコープを持つようになります。

したがって、「standard.css」ファイルがトランスパイルされると、CSS は次のようになります。

Sass パーシャル

デフォルトでは、Sass はすべての .scss ファイルを直接トランスパイルします。ただし、ファイルをインポートする場合、ファイルを直接トランスパイルする必要はありません。

Sass にはこのためのメカニズムがあります。ファイル名がアンダースコアで始まっている場合、Sass はそれをトランスパイルしません。このように名前が付けられたファイルは、Sass ではパーシャルと呼ばれます。

したがって、部分的な Sass ファイルは、先頭にアンダースコアを付けて名前が付けられます。

次の例は、「_colors.scss」という名前の部分的な Sass ファイルを示しています。 (このファイルは「colors.css」に直接トランスパイルされません):

ここで、部分ファイルをインポートする場合は、アンダースコアを省略します。 Sass は、ファイル「_colors.scss」をインポートする必要があることを理解しています。