CSS：sassの$mapでメディアクエリ設定を管理する。

レスポンシブコーディングで使い回せる、メディアクエリ管理用のmixinファイルについて。ずっと使い回してるのですが記述内容ちゃんと理解出来ていなかったので。。。

コピぺコードと使い方

メディアクエリ管理用のscssファイル

// @desc - メディアクエリーのbreakpointを管理します

// mixin定義：media query
@mixin mq-up($breakpoint: md) {
	@media #{map-get($breakpoint-up, $breakpoint)} {
		@content;
	}
}
@mixin mq-down($breakpoint: md) {
	@media #{map-get($breakpoint-down, $breakpoint)} {
		@content;
	}
}

// 変数定義：breakpoint
// min-width
$breakpoint-up: (
	"sm": "only screen and (min-width: 400px)",
	"md": "print, screen and (min-width: 768px)",
	"lg": "print, screen and (min-width: 980px)",
	"xl": "print, screen and (min-width: 1400px)",
) !default;

// max-width
$breakpoint-down: (
	"sm": "only screen and (max-width: 399px)",
	"md": "only screen and (max-width: 767px)",
	"lg": "print, screen and (max-width: 979px)",
	"xl": "print, screen and (max-width: 1399px)",
) !default;

使い方：

PCレイアウトからスタイルを当てていく時はmq-down、
スマホレイアウトからスタイル当てていく時はmq-upで。
（mixinの名前はお好みです）

// mq-up = min-width指定の場合
.test{
  @include mq-up(md){
    background-color: cyan;
  }
}
// 生成されるCSS
@media print, screen and (min-width: 768px) {
  .test {
    background-color: cyan;
  }
}

// mq-down = max-width指定の場合
.test{
  @include mq-down(lg){
    background-color: darkblue;
  }
}
// 生成されるCSS
@media only screen and (max-width: 979px) {
  .test {
    background-color: darkblue;
  }
}

ちょっと解説

sassのmap関数

sassのmap機能は、javascriptで配列にオブジェクトを格納するようなイメージ。

// 変数$mapに使いたい色を設定しておく。
$map : ('red': #C20038 , 'green': #4E9C87 );

// $mapに設定した色を呼び出す。
// 引数1 = 変数名, 引数2 = キー
.block{ color : map-get( $map, 'red' )}

生成されるCSSは下記

.block {
  color: #C20038;
}

インターポレーション

上記の例で、変数$mapの値にクォートを付けると、呼び出した値にもクォートがついてしまう。

// クォートを付けてみる
$map : ('red': '#C20038' , 'green': '#4E9C87' );

// $mapに設定した色を呼び出す。
.block{ color : map-get( $map, 'red' )}

// 生成されるCSS（カラーコードにクォートが付いてしまう）
.block {
  color: "#C20038";
}

文字列をクォートなしで展開したい場合は、#{ }インターポレーションをつけてあげる。

// インターポレーションを使って呼び出す
.block{ color : #{map-get( $map, 'red' )}};

// クォートを外して展開してくれる
.block {
  color: #C20038;
}

今回のmedia queryのように文字列を値として格納したい時や、selectorなどに変数を埋め込みたい時などに使える模様。なるほど。

インターポレーションはこちらを参考に。ありがとうございます。
http://www.tohoho-web.com/ex/sass.html#interpolation

@media設定

最後にmediaの設定。
printやscreenなどは、お好みで設定。以前はscreenのみを記述していたが、レスポンシブサイトは印刷する時にスマホレイアウトで表示されてしまうので追記。

個人的には、ほぼほぼmdだけ使用中。PCとSPの切り替えだけ。あとはvwや％を使って乗り越えてます。。