まずmapって何？
マップとはリストの各要素がkey&value（key1:value1）になったものです。
もう少し解像度を上げてご説明いたします。
$map:(key1: value1,key2: value2,key3: value3);
このようにしてmap変数を定義して$mapの中にプロパティと値を格納することができます。
@ eachでループ処理
上記で簡単なmap変数の説明をしたわけですが、これらを応用してさらに使い勝手の良い物にできます。
それが＠each文になります。
例えば画像が上、下、右、左からスライドインする物を作る場合
＄patternという$map関数を作る。
上下左右のプロパティ値を’up’,’down’,’left’,’right’とする。
スライドインする処理をtransitionY(5px),transitionY(-5px),transitionX(5px),transitionX(-5px)とします。
そしてこれらを＠each文に入れるだけです。
$pattern:("up":transitionY(5px),"down":transitionY(-5px)・・・);
こちらで$map関数を定義します。
upというクラスがついた場合アクションが起きるという処理です。
@each $key,$value in $pattern {.image.#{$key} {transform:$value;}
これで$keyの値を変更するだけで処理を変更することができます。
いちいち１部分を変更したいだけでたくさんのコードを記述する処理が省けますよね。