CSS
Sass
scss
MediaQueries

MediaQueriesを横着して書く方法@Sass

More than 1 year has passed since last update.

Sassのmixin機能を利用して、冗長なメディアクエリを簡単に書きます。


まずブレイクポイントは変数にします

BootStrapの設定を参考に、4デバイスを想定しました。

実のところPCかスマホだけで十分!という場合も少なくないですが、せっかくなので4つとも使います。損はないです。

//== Screen Size

$screen-xs: 480px !default; //Extra small screen(xs)->smartphone
$screen-sm: 768px !default; //Small screen(sm) ->tablet
$screen-md: 992px !default; //Medium screen(md) ->desktop
$screen-lg: 1200px !default; //Large screen(lg) ->wide desktop


Mixinを定義します

@contentディレクティブでコンテントブロックを渡していきます。

デバイス略称(lg|md|sm|xs)を引数として、mq()というmixinを定義してます。

下2つ(pc/sp)は横着の結果生まれました。

モバイルファースト(sp)で作った後、申し訳程度のPC対応するときに重宝しました。悪手なんでしょうけど、暫定処置としてよく使ってます。

可読性のため端折ってますが、実務に組み込む場合は変数をMixin用に置き換えて管理したり、もう少しちゃんと作った方が良いです。

@mixin mq($DEVICE) {

// Large screen / wide desktop
@if $DEVICE == "lg" {
@media (min-width: $screen-lg) {
@content;
}
}
// Medium screen / desktop
@else if $DEVICE == "md" {
@media (min-width: $screen-md) and (max-width: ($screen-lg - 1)) {
@content;
}
}
// Small screen / tablet
@else if $DEVICE == "sm" {
@media (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
@content;
}
}
// Extra small screen / smartphone
@else if $DEVICE == "xs" {
@media (max-width: ($screen-sm - 1)) {
@content;
}
}
// ★PC★ (md & lg)
@else if $DEVICE == "pc" {
@media (min-width: $screen-md) {
@content;
}
}
// ★SP★ (xs & sm)
@else if $DEVICE == "sp" {
@media (max-width: ($screen-md - 1)) {
@content;
}
}
}


実際書いてみる

メディアクエリの管理方法は様々ですが、ルールセットの中に書いてしまうのが手軽で良いです。スコープもわかりやすいし。

別々にしちゃうとどうも忘れるというか、そもそも別ける手間がめんどくさくてつらい。

.banner {

margin: 0;
@include mq(lg) {
width: 512px;
}
@include mq(md) {
width: 256px;
}
@include mq(sm) {
width: 128px;
}
@include mq(xs) {
width: 64px;
}
}

と書くと、以下のようにうまいこと展開してくれます。

.banner {

margin: 0;
}
@media (min-width: 1200px) {
.banner {
width: 512px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.banner {
width: 256px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.banner {
width: 128px;
}
}
@media (max-width: 767px) {
.banner {
width: 64px;
}
}


大事なこと

頑張ってまとめるように書いてもとっ散らかるのがお約束でが、CSS MQPackerという神プラグインが自動でひとまとめにしてくれます。