Sassを使ったメディアクエリのアプローチ

Approaches to Media Queries in Sass | CSS-Tricksで、Sassを使ったメディアクエリのアプローチが紹介されてました。

詳しくは原文を見てもらえればなのですが、単純に幅とかの数値を渡す方法だけならそれなりにいいやり方あるのだけど、メディアタイプとかと併用するとベストな方法がないと。

でいろいろ試した結果、辿り着いたSassが紹介されてます。
そのSassはこちらから入手できます。

eduardoboucas/include-media

使い方

@mixin media()に引数を渡します。
引数は不等号とデバイス名を組み合わせて指定します。
“>=phone”と書くとスマートフォン以上のサイズで、という意味になります。

/* sass */
@include media(">=phone", "<tablet") {
}
@include media(">=tablet", "<=950px") {
}

/* Compiles to */
@media (min-width: 640px) and (max-width: 767px) {
}

@media (min-width: 768px) and (max-width: 950px) {
}

retina対応も引数でretinaと指定すれば対応できます。

/* sass */
@include media("screen", ">=tablet") {
}

@include media(">tablet", "<=desktop", "retina2x") {
}

/* Compiles to */
@media screen and (min-width: 768px) {
}

@media (min-width: 769px) and
	 (max-width: 1024px) and
	 (-webkit-min-device-pixel-ratio: 2),
	 (min-width: 769px) and
	 (max-width: 1024px) and
	 (min-resolution: 192dpi) {
}

デバイスの幅はメディアタイプの設定は変数で定義されてるので、この部分を変更すれば自由に指定可能です。

$breakpoints: (phone: 640px,
		 tablet: 768px,
		desktop: 1024px) !default;

$media-expressions: (screen: "screen",
			handheld: "handheld",
			retina2x:
			("(-webkit-min-device-pixel-ratio: 2)",
			"(min-resolution: 192dpi)")) !default;