SASSで変数のデフォルト値を使用する方法

SASS で定義された変数では、後で設定された値によって古い値が上書きされます。

$色: 赤;
$色: 青;

.btn{
    色: $color;
}

コンパイル後:

.btn{
  色: 青; }

SASS ファイルを提供する UI ライブラリを作成する場合、ユーザーが使用時にカスタマイズできるパラメーターをいくつか提供できます。 SASS コンポーネント内では、ユーザーが設定したこれらの値を適用する必要があります。ただし、ユーザーが変数の値をカスタマイズしない場合は、これらの変数には独自のデフォルト値が必要です。

これは、上記のカバレッジ メカニズムを使用して実現することはできません。 UI ライブラリを @import する前または後に設定しても、このインポートされたファイルの値に影響を与えることはできません。インポート前に値を設定すると、UI ライブラリ内の変数が上書きされ、機能しなくなります。インポート後に設定した場合は、さらに効果がなくなります。

これは UI のスタイル ファイルであると仮定します。

_lib.scss

$色: 赤;
.btn{
    色: $color;
}

別のファイルで使用して、変数の値をカスタマイズしてみます。

ページ.scss

@import 'lib';
$色: 青;

または：

ページ.scss

$色: 青;
@import 'lib';

両方のコンパイル結果は次のとおりです。

.btn{
  色: 赤; }

！デフォルト

このような状況では、SASS は !default フラグを提供します。変数値の後にこの識別子を適用すると、変数が他の場所で定義されていない場合、または定義されていても値が null の場合、ここで設定されたデフォルト値が有効になり、それ以外の場合は他の場所で設定された値が使用されます。

上記の_lib.scssを変換します。

_lib.scss

- $color: 赤;
+ $color: 赤!デフォルト;
.btn{
    色: $color;
}

使用：

$色: 青;

@import "lib";

注意: カスタム値は @import の前に配置する必要があります。そうしないと、有効になりません。

この時点で、コンパイル結果は外部カスタム変数値が適用された、希望どおりのものになります。

.btn{
  色: 青; }

関連リソース

• SASS ドキュメント - デフォルト値
• Sass !default の使用例

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。