使用するのはSass3.3から追加された新しいデータタイプのマップ。これはkeyとvalueのペアを定義できるものです。マップでvalueを取得するにはmap-get()関数を使用します。
map-get($map, $key)
詳しくはこちらの記事を参照してください。
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説 | HTML5Experts.jp
マップはこのように定義しておきます。
$breakpoints: (
'sm': 'screen and (min-width: 400px)',
'md': 'screen and (min-width: 768px)',
'lg': 'screen and (min-width: 1000px)',
'xl': 'screen and (min-width: 1200px)',
) !default;
例えばsmがkeyでscreen and (min-width: 400px)がvalueになります。valueをクウォートで囲んで文字列として明示的に定義しておきます。
上述したmap-get()関数の$mapは定義したマップの$breakpointsにあたり、$keyはsmやmdなどにあたります。mixinは以下のように定義します。引数にkeyを渡してvalueをブレイクポイントとして取得できるようにしています。
@mixin media-query($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
@media #{inspect(map-get($breakpoints, $breakpoint))} {
@content;
}
} @else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
}
}
map-has-key()はマップが存在しているかを判定（これはなくてもOKです）、unquote()でvalueで囲んでいるクウォートを取り除きます。
実際にメディアクエリを呼び出す時にはこのようにします。
.foo {
color: red;
@include media-query(sm) {
color: blue;
}
}
コンパイル結果はこのようになります。
.foo {
color: red;
}
@media screen and (min-width: 400px) {
.foo {
color: blue;
}
}
この方法を使えば、1つのmixinとマップだけで様々な条件のブレイクポイントに対応ができ、それによってブレイクポイントの管理が分かりやすく変更しやすくなります。
以下の記事を参考にさせていただきました。