SASS @import 関数の用途は何ですか?

SASS は、コード内の重複を許可しないことで CSS コードをドライに保つ CSS プリプロセッサです。 SASS ではさまざまなディレクティブが使用できますが、その 1 つが @import ディレクティブです。

'@import' ディレクティブは、1 つの '.scss' または '.sass' ファイルのコードを別のファイルにインポートし、コンパイル中にそれを実行するために使用されます。 「@import」ディレクティブを使用して、変数、関数、ミックスインなどをあるファイルから別のファイルにインポートできます。

ユーザーは、SASS の「@import」ディレクティブを使用して、次の構文に従ってファイルをインポートできます。

上記の構文で「test.scss」または「test.sass」ファイルをインポートしました。ここでは、コードをインポートするときにファイル拡張子を指定する必要はありません。コンパイラーが自動的に拡張子を検出します。

ユーザーが複数の CSS ファイルを 1 つのファイルにインポートする場合は、次の構文を使用する必要があります。

ここで、@import ディレクティブを使用してファイルをインポートする方法を例を挙げて理解しましょう。

例 1

例 1

以下の例では、「font.scss」ファイルにいくつかの変数を追加しています。その後、「@import」ディレクティブを使用して、「fonts.scss」ファイルの内容を「styles.scss」ファイルにインポートします。

「style.scss」ファイルでは、「font.scss」ファイルの変数を使用します。その後、「styles.scss」ファイルのコードをコンパイルしました。ユーザーは、出力イメージで「style.css」ファイルの更新されたコードを確認できます。

リーリー

リーリー ＃＃＃出力＃＃＃＃＃＃＃＃＃＃＃＃ 例 2

例 2

次の例では、色関連の変数を「color.scss」ファイルに追加し、フォント関連の変数を「fonts.scss」ファイルに追加します。 「style.scss」ファイルでは、「@import」ディレクティブを使用して「fonts.scss」ファイルと「colors.scss」ファイルを一緒にインポートします。

ファイル名 - Style.scss

リーリー

ファイル名 - Colors.scss

リーリー ファイル名 - Fonts.scss

リーリー ＃＃＃出力＃＃＃＃＃＃＃＃＃＃＃＃ @import ディレクティブを使用する利点

コードのコンポーネントごとに個別の CSS ファイルを作成し、必要に応じてインポートできます。

@import ディレクティブを使用するデメリット

「@import」ディレクティブの使用にはいくつかの欠点があります。これについては以下で説明します。
変数、関数、ミックスインなど、CSS ファイル内のすべてのコンテンツにグローバルにアクセスできるようになります。したがって、開発者が特定の変数がどこで定義されているかを判断するのは困難です。
インポートされた各ファイル内のすべてがグローバルになるため、競合を避けるために各ファイルには異なる変数名を付ける必要があります。

SASS コンパイラーは、インポートされているかどうかに関係なく、すべての scss ファイルをコンパイルします。これにより、コンパイル時間が増加し、コードの効率が低下します。

• SASS での部分ファイルの使用

上記の欠点を解決するために、SASS ではパーシャルを使用できます。ファイル名の前にアンダースコアを付けることで、部分的な scss ファイルを作成できます。たとえば、「_test.scss」、「_colors.scss」などです。

• 部分ファイルを使用する場合、SASS トランスレータは部分ファイルのコードをコンパイルしません。これにより、コードの効率が向上します。ただし、部分 scss ファイルの内容をメイン scss ファイルにインポートできます。

これは部分的な scss ファイルを使用した例です。

• 例 3

以下の例では、「_colors.scss」部分ファイルを作成し、それを「style.scss」ファイルにインポートします。この例では、部分ファイルを使用しているため、コードはより効率的にコンパイルされます。

ただし、コードの一部を使用するかどうかに関係なく、コード出力は同じままです。

ユーザーは、「@import」ディレクティブを使用して、あるファイルのコードを別のファイルにインポートする方法を学びました。これは、SCSS コードをより小さなチャンクに分割し、重複を避けるのに役立ちます。ただし、@import ディレクティブの使用にはいくつかの欠点がありますが、パーシャルを使用してこの問題を解決できます。

以上がSASS @import 関数の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。