メディアクエリ用のミックスインは、変数の固定数字無しでなければまともに使えない
2016/04/09 Retina ディスプレイ用のミックスインを追加しました。
Sassを使い始めてから、レスポンシブコーディングのメディアクエリをミックスインでどう記述すべきか悩んでいた。
GitHubでもいくつか公開されているが、何だかしっくりこない。
例えば下記2点。
nonakaryuichi/scss_media_queries
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // 一部コードを省略 mq-mobile ( $orientation: portrait, $version: old, $add_orientation: false ) mq-tablet ( $orientation: portrait, $version: old, $add_orientation: false ) mq-desctop ( $size: narrow, $version: modern ) mq-custom ( $min_width, $max_width, $pixel_ratio: false, $orientation: false ) #wrapper { width : 100%; @include mq-mobile('portrait', 'old') {width: 320px;} @include mq-mobile('landscape', 'old') {width: 480px;} @include mq-mobile('landscape', 'future') {width: 568px;} @include mq-tablet('portrait', 'old') {width: 768px;} @include mq-tablet('landscape', 'old') {width: 1024px;} @include mq-desctop('modern') {width: 1024px;} @include mq-desctop('wide') {width: 1280px;} @include mq-desctop('hd') {width: 1600px;} @include mq-desctop('over') {width: 100%;} } |
anthonyshort / _media-queries.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | $mq-mobile-portrait: 320px !default; $mq-mobile-landscape: 480px !default; $mq-tablet-portrait: 768px !default; $mq-tablet-landscape: 1024px !default; $mq-desktop: 1382px !default; // Both portrait and landscape @mixin mobile-only { @media (max-width : $mq-mobile-landscape) { @content; } } // Everything up to and including the portrait width of the phone // Since it's the smallest query it doesn't need a min @mixin mobile-portrait-only { @media (max-width : $mq-mobile-portrait) { @content; } } // Everything up to and including the mobile portrait @mixin mobile-portrait-and-below { @media (max-width : $mq-mobile-portrait) { @content; } } // Everything above and including the mobile portrait @mixin mobile-portrait-and-up { @media (min-width : $mq-mobile-portrait) { @content; } } // Everthing larger than a portrait mobile up until mobile landscape @mixin mobile-landscape-only { @media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) { @content; } } // Everything up to and including the mobile landscape width @mixin mobile-landscape-and-below { @media only screen and (max-width : $mq-mobile-landscape) { @content; } } // Everything above and including the mobile landscape width @mixin mobile-landscape-and-up { @media only screen and (min-width : $mq-mobile-portrait + 1) { @content; } } // Both the portrait and landscape width of the tablet // Larger than a landscape mobile but less than or equal to a landscape tablet @mixin tablet-only { @media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-landscape) { @content; } } // Everything larger than mobile landscape up until the portrait width of the tablet @mixin tablet-portrait-only { @media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-portrait) { @content; } } // Everything below and including the portrait width of the tablet @mixin tablet-portrait-and-below { @media only screen and (max-width : $mq-tablet-portrait) { @content; } } // Everything above and including the portrait width of the tablet @mixin tablet-portrait-and-up { @media only screen and (min-width : $mq-mobile-landscape + 1) { @content; } } // Larger than portrait but less than or equal to the landscape width @mixin tablet-landscape-only { @media only screen and (min-width : $mq-tablet-portrait + 1) and (max-width : $mq-tablet-landscape) { @content; } } // Up to and including the tablet landscape @mixin tablet-landscape-and-below { @media only screen and (max-width : $mq-tablet-landscape) { @content; } } // Everything larger than portrait tablet @mixin tablet-landscape-and-up { @media only screen and (min-width : $mq-tablet-portrait + 1) { @content; } } // Everything larger than a landscape tablet @mixin desktop-and-up { @media only screen and (min-width : $mq-tablet-landscape + 1) { @content; } } // Everything below and including the desktop @mixin desktop-and-below { @media only screen and (max-width : $mq-desktop) { @content; } } // Everything larger than a landscape tablet but less than or equal to the desktop @mixin desktop-only { @media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) { @content; } } // Retina screens have a 1.5 pixel ratio, not 2 @mixin retina { @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { @content; } } |
問題が多い
これらのように多数のプロパティを用意したり、ブレークポイントの数字をあらかじめ固定化すると、いくつかの問題が発生する。
- 多数のプロパティを暗記しなければならない
- 任意のブレークポイントを作れない
- コードを増減させるのが面倒
これでは、Sassを使う意味が大きく損なわれてしまう。
シンプルに修正
というわけで、ブレークポイントを任意で記述できるよう、変数のデフォルトを削除してシンプルに修正。
ミックスイン
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // min-width @mixin min($width) { @media screen and (min-width: $width + px) { @content; } } // max-width @mixin max($width) { @media screen and (max-width: $width + px) { @content; } } // Retina ディスプレイ @mixin rt { @media (-webkit-min-device-pixel-ratio: 2) { @content; } } |
例）@includeでブレークポイントを記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // 1024pxまでを追加 #container { width: 1000px; float: left; @include max(1024) { width: 100%; float: none; } } // 1280px以上を追加 footer { width: 800px; color: black; @include min(1280) { width: 80%; color: white; } } // Retina ディスプレイの場合 #container { @include rt { width: 90%; } } |
コンパイル後のCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #container { width: 1000px; float: left; } @media screen and (max-width: 1024px) { #container { width: 100%; float: none; } } footer { width: 800px; color: black; } @media screen and (min-width: 1280px) { footer { width: 80%; color: white; } } @media (-webkit-min-device-pixel-ratio: 2) { #container { width: 90%; } } |
Sass＆Compass 徹底入門 CSSのベストプラクティスを効率よく実現するために
posted with amazlet at 15.07.29
翔泳社 (2014-03-25)
売り上げランキング: 42,710
売り上げランキング: 42,710
コメントを投稿する