[解決済み】SASS - 複数のファイル間で変数を使用する

質問

プロジェクトのすべての SASS 変数定義を格納する 1 つの中央 .scss ファイルを保持したいと思います。

// _master.scss 

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

このプロジェクトは、その性質上、大量のCSSファイルが存在することになります。プロジェクト全体のスタイル変数をすべて一箇所で宣言することが重要です。

SCSSでこれを実現する方法はあるのでしょうか？

どのように解決するのですか？

この質問はずいぶん前にされたものなので、最新の回答を掲載しようと思います。

今すぐ 避ける を使って @import . ドキュメントから引用しています。

Sass は今後数年間かけて徐々に廃止され、最終的には 最終的には言語から完全に削除されます。より望ましいのは@useルール 代わりに

理由の一覧はこちら

を使用する必要があります。 @use を以下のように設定します。

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

また、名前空間の別名を作成することもできます。

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

EDIT 執筆時（2020年11月）に@und3rdgさんからご指摘があったように @use は現在Dart Sassでのみ利用可能で ではなく LibSass (現在は非推奨) または Ruby Sass。参照 https://sass-lang.com/documentation/at-rules/use 最新の互換性については