複数のファイルにわたって SASS 変数を宣言して使用するにはどうすればよいですか?

複数のファイルにわたる SASS 変数の利用

複数の CSS ファイルを含むプロジェクトでは、プロジェクト全体のスタイル変数を管理することが重要になる場合があります。 SASS は、変数を使用することで、これに対する堅牢なソリューションを提供します。この記事では、複数の SASS ファイル間で変数を宣言して使用し、一貫性と保守性を確保する方法について説明します。

中央の場所での変数の宣言

_master.scss などの単一のファイルを持つことを検討してください。すべての SASS 変数定義が保存されます。次の例に示すように、このファイルは変数の中央リポジトリとして機能します。

// _master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;

他のファイルに変数を含める

これらの変数を他の CSS ファイルに含めるには、@import

// MyStylesheet.scss

@import "_master.scss";

// Use variables defined in _master.scss
.container {
  color: $accent;
}

この例では、MyStylesheet.scss ファイルが _master.scss ファイルをインポートし、その中で宣言されている変数にアクセスします。

代替方法: モジュール式アプローチ

また、ユーティリティ ファイル用に別のフォルダーを作成することで、モジュール式のアプローチを採用することもできます。 _variables.scss という名前のファイル内で変数を宣言します。次に、メインの SASS ファイル (style.scss など) で、他のすべての SASS ファイルをインポートし、_variables.scss ファイルから始めます:

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

このアプローチでは、_variables.scss で定義された変数は次のようになります。プロジェクト全体からアクセスできます。このファイルは、変数へのアクセスが必要な他のファイルの前にインポートされていることを確認してください。

以上が複数のファイルにわたって SASS 変数を宣言して使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。