超簡単!メディアクエリを扱えるmixinライブラリ、sass-mediaqueriesの使い方【Sass】

超簡単!メディアクエリを扱えるmixinライブラリ、sass-mediaqueriesの使い方

まずはダウンロード

sass-mediaqueriesからダウンロードします。

ダウンロードしたら_media-queries.scssを読み込みましょう！

@import "media-queries";

パスは各自合わせて下さい。

これで準備完了です！あとは使い方の紹介になります。

画面の幅で切り替え

screen($min-width, $max-width, $orientation: false)

画面幅が$min-width以上、$max-width以下の場合。
$orientationは任意でlandscapeまたはportraitを指定します。
※$orientationは画面の向きです

コンパイル前

@include screen(320px, 640px) {
  /* ここにスタイルを記述 */
}
@include screen(768px, 1024px, landscape) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (min-width: 320px) and (max-width: 640px) {
  /* ここにスタイルが出力されます */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* ここにスタイルが出力されます */
}

max-screen($width)

画面幅が$width以下の場合。
これは使う頻度が高いです！

コンパイル前

@include max-screen(768px) {
  /* ここにスタイルを記述 */
}
@include max-screen(1024px) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (max-width: 768px) {
  /* ここにスタイルが出力されます */
}
@media only screen and (max-width: 1024px) {
  /* ここにスタイルが出力されます */
}

min-screen($width)

画面幅が$width以上の場合。

コンパイル前

@include min-screen(768px) {
  /* ここにスタイルを記述 */
}
@include min-screen(1024px) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (min-width: 768px) {
  /* ここにスタイルが出力されます */
}
@media only screen and (min-width: 1024px) {
  /* ここにスタイルが出力されます */
}

画面の高さで切り替え

screen-height($min-height, $max-height, $orientation: false)

画面の高さが$min-width以上、$max-width以下の場合。
$orientationは任意でlandscapeまたはportraitを指定します。
※$orientationは画面の向きです

コンパイル前

@include screen-height(640px, 768px) {
  /* ここにスタイルを記述 */
}
@include screen-height(640px, 768px, landscape) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (min-height: 640px) and (max-height: 768px) {
  /* ここにスタイルが出力されます */
}
@media only screen and (min-height: 640px) and (max-height: 768px) and (orientation: landscape) {
  /* ここにスタイルが出力されます */
}

max-screen-height($width)

画面の高さが$width以下の場合。

コンパイル前

@include max-screen-height(1024px) {
  /* ここにスタイルを記述 */
}
@include max-screen-height(768px) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (max-height: 1024px) {
  /* ここにスタイルが出力されます */
}
@media only screen and (max-height: 768px) {
  /* ここにスタイルが出力されます */
}

min-screen-height($width)

画面の高さが$width以上の場合。

コンパイル前

@include min-screen-height(768px) {
  /* ここにスタイルを記述 */
}
@include min-screen-height(1024px) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (min-height: 768px) {
  /* ここにスタイルが出力されます */
}
@media only screen and (min-height: 1024px) {
  /* ここにスタイルが出力されます */
}

画面の向きで切り替え

landscape() & portrait()

landscape
画面の幅が高さよりも大きい場合。つまり横向き。

portrait
画面の高さが幅よりも大きいか等しい場合。つまり縦向き。

コンパイル前

@include landscape {
  /* ここにスタイルを記述 */
}
@include portrait {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (orientation: landscape) {
  /* ここにスタイルが出力されます */
}
@media only screen and (orientation: portrait) {
  /* ここにスタイルが出力されます */
}

応用など

ブレイクポイントを変数化

例では1024pxなど直接記述しましたが以下のように変数にした方が今後の管理や修正に対応しやすくなります。

$tb : 1024px;
$sp : 768px;
$sp-s : 599px;
$pc : $tb + 1;

コンパイル前

@include max-screen($sp) {
  /* ここにスタイルを記述 */
}

コンパイル後

@media only screen and (max-width: 768px) {
  /* ここにスタイルが出力されます */
}

組み合わせ

以下のように組み合わせて使うこともできます。

画面幅が768px以下かつ画面の高さが400px以下の場合

コンパイル前

@include max-screen(768px) {
  @include max-screen-height(400px) {
    /* ここにスタイルを記述 */
  }
}

コンパイル後

@media only screen and (max-width: 768px) and (max-height: 400px) {
  /* ここにスタイルが出力されます */
}

このように応用が効きやすいので様々な場面に対応できます！

まとめ

今回ご紹介したのは大きく分けて3つですがこれだけで十分だと思います。