SASSにおけるマップ
この記事ではSASSにおけるマップについて説明します。
SASSのマップの基本から応用までを解説し、実用的な例を示します。
YouTube Video
SASSにおけるマップ
SASSのマップとは？
SASSのマップは、キーと値のペアを保持するデータ構造で、JavaScriptのオブジェクトやPythonの辞書に似ています。SASSでマップを使用することで、複雑なスタイルを簡潔に管理でき、メンテナンス性を向上させることができます。
マップの基本構文
SASSのマップは、()（丸括弧）を使用して定義します。以下のような構文です。
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);例えば、色のテーマを管理するマップを作成する場合は、次のように定義できます。
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);マップの値を取得する
SASSでは、map.get()関数を使用してマップから値を取得します。
使用例:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}出力:
1.button {
2 background-color: #3498db;
3}- このコードは、
$colorsマップからprimaryの色値を取得してボタンの背景色に設定しています。
マップにキーと値を設定する
map.set()関数を使うと、指定したキーに新しい値を設定できます。既存のキーがある場合は、その値を上書きします。
使用例
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}- このコードは、マップに
dangerキーを追加し、その値をボタンの背景色に設定します。
出力
1.button-danger {
2 background-color: #e74c3c;
3}マップからキーを削除する
map.remove()関数を使うと、マップから特定のキーとその値を削除できます。
使用例
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}- このコードは、マップから
dangerキーを削除するため、button-dangerの背景色はnullになります。
出力
1.button-primary {
2 background-color: #3498db;
3}マップにキーと値を追加する
map.merge()関数を使うと、既存のマップに新しいキーと値を追加できます。
使用例
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}- このコードは、既存のSASSマップに
dangerキーを追加して、その色をボタンの背景色に設定します。
出力
1.button-danger {
2 background-color: #e74c3c;
3}マップにキーと値を複数追加する
map.merge()関数では、既存のマップに複数の新しいキーと値を同時に追加することもできます。
使用例
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}- このコードは、既存のSASSマップに複数のキーと値を同時に追加しています。
マップのキーを確認する
map.has-key()関数を使うと、特定のキーがマップに存在するかを確認できます。
使用例
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // falseマップ内のすべてのキーまたは値を取得する
すべてのキーを取得
map.keys()関数を使用するとすべてのキーを取得できます。
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)すべての値を取得
map.values()関数を使用するとすべての値を取得できます。
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)マップをループ処理する
SASSでは、@eachディレクティブを使用してマップをループ処理できます。
使用例
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}- このコードは、SASSマップの各キーと値をループして、それぞれの色を持つクラスを自動生成します。
出力
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}ネストされたマップの扱い
マップはネスト構造を持つこともできます。この場合、map.get()をネストして使用します。
使用例
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}- このコードは、ネストされたSASSマップから
lightテーマの背景色と文字色を取得してbodyに適用します。
出力
1body {
2 background-color: #ffffff;
3 color: #000000;
4}マップの応用例：レスポンシブデザイン
マップを使うことで、メディアクエリやレスポンシブデザインを簡潔に管理できます。
使用例
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}- このコードは、SASSマップを使って各ブレークポイントごとにレスポンシブ用のコンテナクラスを自動生成します。
出力
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}結論
SASSのマップは、スタイルシートを整理し、柔軟性と再利用性を高める強力なツールです。値の管理やループ処理、レスポンシブデザインの実装など、さまざまな場面で活用できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。