【SASS】変数の使い方を実例で解説｜map-getとは何か？プロパティ名や処理の一部で変数を呼び出す方法（.scss, #{ }, オブジェクト形式キー,値で定義する方法）

SASS（.scss）では変数を使うことができます。

変数では値を指定する以外に、オブジェクト形式（キー名: 値）で複数の値を持たせることもできます。

変数の呼び出しではmap-getというメソッドが使われる場合もあったり、@importと@useでファイルをインポートしたときに変数の呼び出し方が違うといったクセもあります。

ここでは、変数の定義方法や、map-getの使い方、@importと@useしたときのそれぞれで変数の呼び出し方がどのように変わるかを実例で解説しています。

変数の定義方法

SASS（.scss）で変数を定義する方法は以下の2種類があります。

特に、変数の値をオブジェクト形式（キー名: 値）で指定するときは、呼び出し時にmap-getメソッドを使用する必要があります。

以下でそれぞれについて解説します。

変数で1つの値を指定する方法

書き方

変数で１つの値を指定するときは、$変数名として、その変数に代入する値をそのまま記述します。

$変数名: 値;

変数の呼び出し方

同じファイルか、@importを使った場合

同じファイルの中で定義してある変数か、@importを使って読み込んだ変数を呼び出すには、プロパティの値に「$変数名」をそのまま記述します。

プロパティ名: $変数名;

@useを使った場合

@useを使って読み込んだファイルの中の変数を呼び出すには、変数名の前にファイルの名前空間を指定します。

プロパティ名: 名前空間.$変数名;

実例：同じファイルの変数を使う場合

同じファイル内で、変数「$theme-color」と「$original-size」を用意して、それぞれプロパティの値で呼び出す場合は以下のようになります。

$theme-color: red;
$original-size: 16px;

.hoge {
  color: $theme-color;
  font-size: $original-size;
}

　↓ CSSにコンパイル

.hoge {
  color: red;
  font-size: 16px;
}

指定した変数の値が入っていることがわかります。

実例：@importを使う場合

「_variables.scss」というファイルに以下のように変数「$theme-color」と「$original-size」が記述してあるとします。

$theme-color: red;
$original-size: 16px;

これを「test.scss」というファイルの中で@importを使って読み込み、各変数をプロパティの値として使用します。

なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。

@import 'variables';

.headline {
  color:$theme-color;
  font-size: $original-size;
}

　↓ CSSにコンパイル

.headline {
  color: red;
  font-size: 16px;
}

指定した変数の値が入っていることがわかります。

実例：@useを使う場合

「_variables.scss」というファイルに以下のように変数「$theme-color」と「$original-size」が記述してあるとします。

$theme-color: red;
$original-size: 16px;

これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用します。

なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。

@use 'variables';

.headline {
  color: variables.$theme-color;
  font-size: variables.$original-size;
}

　↓ CSSにコンパイル

.headline {
  color: red;
  font-size: 16px;
}

指定した変数の値が入っていることがわかります。

実例：@useを使う場合（名前空間を変更する場合）

「_variables.scss」というファイルに以下のように変数「$theme-color」と「$original-size」が記述してあるとします。

$theme-color: red;
$original-size: 16px;

これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用します。

その際に「as」を使うと名前空間に好きな名前をつけることができます。

なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。

@use 'variables' as var;

.headline {
  color: var.$theme-color;
  font-size: var.$original-size;
}

　↓ CSSにコンパイル

.headline {
  color: red;
  font-size: 16px;
}

指定した変数の値が入っていることがわかります。

オブジェクト形式で複数の値を指定する（キー名: 値）

SASSでは変数の値をオブジェクト形式で指定することもできます。

オブジェクト形式にすると、1つの変数に対して複数の値を持たせることができます。

mixinなどの処理に引数を渡して、その引数の内容に応じて値を振り分ける場合は、変数をオブジェクト形式にします。

使い方

$変数名の値にオブジェクト（キー名: 値）を記述します。

$変数名: ( 'キー名1': 値1, 'キー名2': 値2,,,);

変数の呼び出し方

値をオブジェクト形式で記述した変数を呼び出すときはmap-getメソッドを使います。

同じファイルか、@importを使った場合

同じファイルの中で定義してある変数か、@importを使って読み込んだ変数を呼び出すには、map-getメソッドを使い、第1引数で変数名を指定し、第２引数で欲しい値を持つキー名を指定します。

map-get($変数名, キー名);

@useを使った場合

@useを使って読み込んだファイルの中の変数を呼び出すには、変数名の前にファイルの名前空間を指定します。

map-get(名前空間.$変数名, キー名);

実例：同じファイルの場合

1つのファイルに値に「default」「small」「large」というキー名を持つ変数「$fsizes」を用意して、map-getを使って欲しい値を呼び出す場合は以下のようになります。

//値がオブジェクト形式の変数を定義する
$fsizes: ( 'default': 14px, 'small': 10px, 'large': 20px );



//オブジェクト形式の変数をキー名を指定して呼び出す
.headline {
  font-size: map-get( $fsizes, large );
}

.detail {
  font-size: map-get( $fsizes, small );
}

.contents {
  font-size: map-get( $fsizes, default );
}

　↓ CSSにコンパイル

.headline {
  font-size: 20px;
}

.detail {
  font-size: 10px;
}

.contents {
  font-size: 14px;
}

map-getで指定した変数の中のキーの値が入っていることがわかります。

実例：@importを使う場合

「_variables.scss」というファイルに以下のように変数「$fsizes」が記述してあるとします。

$fsizes: ( 'default': 14px, 'small': 10px, 'large': 20px );

これを「test.scss」というファイルの中で@importを使って読み込み、各変数をプロパティの値として使用します。

なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。

@import 'variables';


.headline {
  font-size: map-get( $fsizes, large );
}

.detail {
  font-size: map-get( $fsizes, small );
}

.contents {
  font-size: map-get( $fsizes, default );
}

　↓ CSSにコンパイル

.headline {
  font-size: 20px;
}

.detail {
  font-size: 10px;
}

.contents {
  font-size: 14px;
}

指定した変数の値が入っていることがわかります。

実例：@useを使う場合

「_variables.scss」というファイルに以下のように変数「$fsizes」が記述してあるとします。

$fsizes: ( 'default': 14px, 'small': 10px, 'large': 20px );

これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用します。

なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。

@use 'variables';

.headline {
  font-size: map-get( variables.$fsizes, large );
}

.detail {
  font-size: map-get( variables.$fsizes, small );
}

.contents {
  font-size: map-get( variables.$fsizes, default );
}

　↓ CSSにコンパイル

.headline {
  font-size: 20px;
}

.detail {
  font-size: 10px;
}

.contents {
  font-size: 14px;
}

指定した変数の値が入っていることがわかります。

実例：@useを使う場合（名前空間を変更する場合）

「_variables.scss」というファイルに以下のように変数「$fsizes」が記述してあるとします。

$fsizes: ( 'default': 14px, 'small': 10px, 'large': 20px );

これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用します。

その際に「as」を使うと名前空間に好きな名前をつけることができます。

なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。

@use 'variables' as var;

.headline {
  font-size: map-get( var.$fsizes, large );
}

.detail {
  font-size: map-get( var.$fsizes, small );
}

.contents {
  font-size: map-get( var.$fsizes, default );
}

　↓ CSSにコンパイル

.headline {
  font-size: 20px;
}

.detail {
  font-size: 10px;
}

.contents {
  font-size: 14px;
}

指定した変数の値が入っていることがわかります。

変数を値以外で呼び出す方法（プロパティで呼び出す場合）

変数を値以外で呼び出す方法

変数をプロパティ名など値以外の処理の中で呼び出したい場合は#{ }を使う必要があります。

#{ 変数名 }

プロパティ名や@media（メディアクエリ）の中で変数を呼び出したい場合は #{}を使います。

#{ }の実例

例えば、以下のように変数「$fsize」に値「font-size」、「$unit」に値「px」が入っているとします。

$fsize: font-size;
$unit: px;

これを、pタグの中で「font-size: 20px」として呼び出すためには、プロパティ名のところで#{ }を使用する必要があります。

$fsize: font-size;
$unit: px;

p{
  #{$fsize}: 20 + $unit;
}

　↓ CSSにコンパイル

p {
  font-size: 20px;
}

#{ }がないと無視される

例えば、以下のように変数「$fsize」に値「font-size」、「$unit」に値「px」が入っているとします。

$fsize: font-size;
$unit: px;

これを、pタグの中で「font-size: 20px」として呼び出すときに、プロパティ名のところで#{ }を使用しないと、そのプロパティは無視されます。

$fsize: font-size;
$unit: px;

p{
  $fsize: 20 + $unit;
  color: red;
}

　↓ CSSにコンパイル

p {
  color: red;
}

「$fsize: 20 + $unit;」の記述が無視されています。

@mediaと#{ }

メディアクエリ@mediaを使って、変数の中にあるブレイクポイントの記述を呼び出す場合は #{ }が必要になります。

例えば、変数「$breakpoint」がsp, tablet, pcというキー名で以下のようなテキストを所持しているとします。

$breakpoint: (
  'sp': 'screen and (min-width: 320px)',
  'tablet': 'screen and (min-width: 600px)',
  'pc': 'screen and (min-width: 1000px)',
);

これを@mediaクエリの中でmap-getを使って呼び出す場合は以下のようになります。

@media #{ map-get($breakpoint, sp) } {
  p {
    color: red;
  }
}

　↓ CSSにコンパイル

@media screen and (min-width: 320px) {
  p {
    color: red;
  }
}

変数の値を上書きする

「!default」を使うと変数の値を上書きすることができます。詳細については下記をご参考ください。

【SASS】!defaultとは何か？使い方やメリットを実例で解説