Scss で map から任意の値を取り出す

Scss (>= v3.3)で each 等を使用せずに map から任意の値を取り出す必要が生じたのですが、その方法で少し躓いたのでメモ。

$grid-breakpoints: (
    sm: 576,
    md: 768px,
    lg: 992px,
    xl: 1200px
);

例えばこんな map があったとして、 md の値を使用したくなったとき。

.mdWidth {
    @media (max-width: map-get($grid-breakpoints, 'md') - 1) {
        /* 指定 */
    }
}

こんな形で、 map-get で変数とキーを引数に渡して取得します。

最初はPHPのように $grid-breakpoints['md'] とかでアクセスするのだろうかと思っていましたが、全然違いました。

ちなみに map は他にも map-merge や map-keys といった関数もあるので一通り見ておくと良いかもしれませんね。

参考

• 【備忘録】sass の変数、配列、マップ（連想配列的な？） – Qiita
• Sassのmap操作をおさらいする+便利な関数をいくつか – wadackel.me