mapとは、JavaScriptでいう連想配列のようなもので、キーと値をセットで定義できる変数です。普通の変数と違って何がよいかというと、ループして同じような処理を自動でできるようになります。

たとえば色違いの項目をたくさん作る必要がある場合、Sassに書くルールは1つでよく、パターンを増やすにも変数を1行増やすだけでいいので管理しやすくとても楽。

$map: (
  1: #ce5a24,
  2: #2f99ac,
  3: #9e272d,
);

.hoge {
  &__item {
    @each $n, $color in $map {
      @at-root #{&}:nth-child(#{$n}) {
        background-color: $color;
      }
    }
  }
}

この例でいうと、$nにキー(変数の左側)、$colorに値(変数の右側)が代入されます。この2つはわかりやすい任意の文字列で大丈夫。

$map: (
  hokkaido: #6cb041,
  tohoku: #d98d66,
  kanto: #6537a8,
  kansai: #e43474,
  chushikoku: #5d94a4,
  kyushu: #a63914,
);

.section {
  @each $key, $color in $map {
    @at-root #{&}-#{$key} {
      color: $color;
      background-image: url(/path/to/bg_#{$key}.jpg);
    }
  }
}

mapに限った話ではないですが、Sassでは変数を#{$key}と囲うことで、ファイルパスやセレクタに使うこともできます。