プログラミング言語に精通している場合、Sassマップは配列(PHPまたは JavaScript )または辞書(Python)に似ています。 そうでない場合は、類似したアイテムをグループ化したリストと考えてください。

Sassマップには、キーワード(キー)と値のペアがあり、テーマの色やブレークポイントなど、同様の変数をグループ化するために使用されます。 次に、それらはmap-get関数で使用されます-最初のパラメーターおよびキーワードとしてmapを使用します。

$theme: (
  primary: #f00,
  secondary: #0f0,
  neutral: #f2f2f2
);

a {
 color: map-get($theme, primary);
}

div {
  background-color: map-get($theme, neutral);
  color: map-get($theme, secondary);
}

Sassマップは、コードをより読みやすく、一貫性のあるものにするために非常に役立ちます。 マップを使用すると、結果をループして、CSSの繰り返しを減らすことができます。 このチェックアウトの詳細については、 Sass @eachループスニペットをご覧ください。

キーと値のペアが必要ない場合は、Sassリストを使用して単純なリストを作成できます。