SASSの`!default`フラグ

この記事ではSASSの!defaultフラグについて説明します。

!defaultフラグについて詳しく説明し、実際の例を交えながらその使い方を解説します。

YouTube Video

SASSの!defaultフラグ

SASSの!defaultフラグは、スタイルシートのモジュール化や再利用性を向上させるための重要なツールです。このフラグを使用することで、変数にデフォルト値を設定し、他の場所で定義された値が優先されるようにすることができます。ここでは、!defaultフラグについて詳しく説明し、実際の例を交えながらその使い方を解説します。

!defaultフラグは、変数にデフォルト値を設定するためのSASS特有の機能です。このフラグを付与することで、以下の動作を実現します。

• デフォルト値の指定 変数が他の場所で定義されていない場合にのみ値を設定します。

• 優先順位の制御 変数が既に定義されている場合、その値を上書きしません。

この機能は、モジュールやライブラリを構築する際に特に有用です。ユーザーがカスタム値を設定できる一方で、何も指定されていない場合にはデフォルト値が使用されます。

基本例

以下のコードは、!defaultフラグの基本的な使い方を示しています。

1// _variables.scss
2$primary-color: blue !default;

• !defaultフラグを使って、デフォルトの変数 $primary-color を定義しています。

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• @useで変数を読み込み、withを使って $primary-color を上書きして利用しています。

出力されるCSS

1body {
2    background-color: red;
3}

• この例では、main.scssで$primary-colorがredに設定されているため、_variables.scssのblueは使用されません。

変数が未定義の場合

main.scssで変数を定義しなかった場合、デフォルト値が使用されます。

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• 変数を上書きせずに読み込むため、_variables.scssで定義された $primary-color のデフォルト値であるblueが適用されます。

出力されるCSS

1body {
2    background-color: blue;
3}

ネストされたモジュールでの利用

モジュール内で!defaultを使用することで、柔軟なカスタマイズが可能になります。

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• $primary-color と $button-color を !default フラグ付きで定義しています。

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• variables モジュールを読み込み、変数 $button-color を使って .button の色を指定しています。

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• @use の with を使って $button-color を orange に上書きし、buttons モジュールを利用しています。

出力されるCSS

1.button {
2    color: orange;
3}

• このように、モジュールが利用者の設定を尊重しつつ、デフォルト値を提供します。

利用上の注意

!defaultフラグを利用する際、以下の点を考慮できます。

• デフォルト値の適切な選定 デフォルト値は一般的なケースに対応するよう選定してください。

• 意図的な設計 変数名を一貫性のあるものにし、他のモジュールとの競合を避けます。

• 順序の確認 !defaultフラグが意図通りに機能するためには、変数の上書きが発生する順序を正しく管理する必要があります。

実用的なシナリオ

テーマの切り替え

例えば、テーマをサポートするライブラリを作成する場合、!defaultを使用してカスタマイズ可能なデフォルト値を提供できます。

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• テーマ用に $background-color と $text-color を !default フラグ付きで定義し、body に適用しています。

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• @use の with を使って $background-color を上書きし、テーマをカスタマイズしています。

出力されるCSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

再利用可能なコンポーネント

再利用可能なボタンコンポーネントでデフォルトスタイルを提供しつつ、ユーザーが色を上書きできる仕組みを作ります。

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• ボタン用のデフォルト背景色と文字色を !default で定義し、スタイルを適用しています。

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• @use の with を使って $button-bg を上書きし、ボタンの色をカスタマイズしています。

出力されるCSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

!defaultフラグのまとめ

SASSの!defaultフラグは、モジュールやライブラリを構築する際に強力なツールとなります。これにより、再利用性を高めつつ、柔軟なカスタマイズを可能にします。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video