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-mergemap-keys といった関数もあるので一通り見ておくと良いかもしれませんね。

参考

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。