マップ

Sassのマップはキーと値のペアを保持し、対応するキーで値を簡単に検索できるようにします。マップは (<式>: <式>, <式>: <式>) と記述します。: の前の式がキーで、後の式がそのキーに関連付けられた値です。キーは一意である必要がありますが、値は重複しても構いません。リストとは異なり、マップは必ず括弧で囲む必要があります。ペアのないマップは () と記述します。

マップでは、任意のSass値をキーとして使用できます。== 演算子は、2つのキーが同じかどうかを判断するために使用されます。

マップの使い方マップの使い方 パーマリンク

マップは有効なCSS値ではないため、単独ではあまり役に立ちません。そのため、Sassはマップを作成し、マップに含まれる値にアクセスするため多くの関数を提供しています。

値の検索値の検索 パーマリンク

マップはキーと値の関連付けに関するものなので、当然、キーに関連付けられた値を取得する方法があります。map.get($map, $key) 関数です！この関数は、指定されたキーに関連付けられたマップ内の値を返します。マップにキーが含まれていない場合はnullを返します。

• SCSS
• Sass

プレイグラウンド

SCSS 構文

@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

プレイグラウンド

Sass 構文

@use "sass:map"
$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.get($font-weights, "medium")  // 500
@debug map.get($font-weights, "extra-bold")  // null

すべてのペアに対して何かを行うすべてのペアに対して何かを行う パーマリンク

これは実際には関数を使用していませんが、マップを使用する最も一般的な方法の1つです。@each ルールは、マップ内の各キーと値のペアに対してスタイルのブロックを評価します。キーと値は変数に割り当てられるため、ブロック内で簡単にアクセスできます。

• SCSS
• Sass
• CSS

プレイグラウンド

SCSS 構文

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

プレイグラウンド

Sass 構文

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph

CSS出力

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

マップに追加するマップに追加する パーマリンク

マップに新しいペアを追加したり、既存のキーの値を置き換えたりすることも役に立ちます。map.set($map, $key, $value) 関数はこれを行います。$key の値を $value に設定した $map のコピーを返します。

• SCSS
• Sass

プレイグラウンド

SCSS 構文

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.set($font-weights, "extra-bold", 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900);
// ("regular": 400, "medium": 500, "bold": 900)

プレイグラウンド

Sass 構文

@use "sass:map"

$font-weights: ("regular": 400, "medium": 500, "bold": 700)

@debug map.set($font-weights, "extra-bold": 900)
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900)
// ("regular": 400, "medium": 500, "bold": 900)

値を1つずつ設定する代わりに、map.merge($map1, $map2)を使用して2つの既存のマップをマージすることもできます。

• SCSS
• Sass

プレイグラウンド

SCSS 構文

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

プレイグラウンド

Sass 構文

@use "sass:map"

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($light-weights, $heavy-weights)
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

両方のマップに同じキーがある場合、返されるマップでは2番目のマップの値が使用されます。

• SCSS
• Sass

プレイグラウンド

SCSS 構文

@use "sass:map";

$weights: ("light": 300, "medium": 500);

@debug map.merge($weights, ("medium": 700));
// ("light": 300, "medium": 700)

プレイグラウンド

Sass 構文

@use "sass:map";

$weights: ("light": 300, "medium": 500)

@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)

Sassマップは不変であるため、map.set() と map.merge() は元のリストを変更しないことに注意してください。

不変性不変性 パーマリンク

Sassのマップは*不変*です。つまり、マップ値の内容は変更されません。Sassのマップ関数はすべて、オリジナルを変更するのではなく、新しいマップを返します。不変性は、同じマップがスタイルシートのさまざまな部分で共有されている場合に発生する可能性のある、多くの厄介なバグを回避するのに役立ちます。

ただし、同じ変数に新しいマップを割り当てることで、時間の経過とともに状態を更新することはできます。これは、関数やMixinでマップの設定を追跡するためによく使用されます。

• SCSS
• Sass

プレイグラウンド

SCSS 構文

@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@mixin add-browser-prefix($browser, $prefix) {
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global;
}

@include add-browser-prefix("opera", o);
@debug $prefixes-by-browser;
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)

プレイグラウンド

Sass 構文

@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@mixin add-browser-prefix($browser, $prefix)
  $prefixes-by-browser: map.merge($prefixes-by-browser, ($browser: $prefix)) !global


@include add-browser-prefix("opera", o)
@debug $prefixes-by-browser
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)