[SCSS]いろんなブレイクポイントのメディアクエリの設定方法（あらゆる場面に対応）

はじめに
SCSS
使い方

はじめに

メディアクエリを「〜px以上」「〜px以下」「px以上〜px以下」と柔軟に調整したい、、、！

と思ったことはありませんか？

以下の方法でしっかり対応できます！　

SCSS

$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
@mixin mq($type, $bp1, $bp2:0) {
    @if ($type == min) {
        @media screen and (min-width: #{map-get($breakpoints, $bp1)}) {
        @content;
        }
    } @else if ($type == max) {
        $width: map-get($breakpoints, $bp1);
        $width: $width - 1px;
        @media screen and (max-width: #{$width}) {
        @content;
        }
    } @else if ($type == bw) { // bw → between
        $width: map-get($breakpoints, $bp2);
        $width: $width - 1px;
        @media screen and (min-width: #{map-get($breakpoints, $bp1)})
        and (max-width: #{$width}) {
        @content;
        }
    }
}

ブレイクポイントの値は、bootstrapを参考にして設定しています。

使い方

768px（md）以上の時

コンパイル前

.heading {
   font-size: 20px;
   color: blue;
}
@include mq(min, md) {
    .heading {
        font-size: 18px;
        color: red;
    }
}

コンパイル後

.heading {
  font-size: 20px;
  color: blue;
}

@media screen and (min-width: 768px) {
  .heading {
    font-size: 18px;
    color: red;
  }
}

767px（md）以下の時

コンパイル前

.heading {
   font-size: 20px;
   color: blue;
}
@include mq(max, md) {
    .heading {
        font-size: 18px;
        color: red;
    }
}

コンパイル後

.heading {
  font-size: 20px;
  color: blue;
}

@media screen and (max-width: 767px) {
  .heading {
    font-size: 18px;
    color: red;
  }
}

576px（sm）以上〜767px（md）以下の時

コンパイル前

.heading {
  font-size: 20px;
  color: blue;
}
@include mq(bw,sm, md) {
   .heading {
       font-size: 18px;
       color: red;
   }
}

コンパイル後

.heading {
  font-size: 20px;
  color: blue;
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .heading {
    font-size: 18px;
    color: red;
  }
}