Sassでブレイクポイントを指定する方法

SassはCSSを効率的に書くことのできる言語です。

ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。

本記事では、Sassでブレイクポイントを指定する方法について書いていきます。

結論のコード

まずはブレイクポイントを定義して、$breakpointに代入します。

$breakpoint: (
  sm: "(min-width: 576px)",
  md: "(min-width: 768px)",
  lg: "(min-width: 992px)",
  xl: "(min-width: 1200px)",
  xxl: "(min-width: 1400px)"
);

ブレイクポイントの値は、bootstrapのブレイクポイントを参考にしました。

次にmixinを定義します。

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
    @content;
  }
}

@include mq()の引数にブレイクポイントの名前を入れて、以下のように使用します。

h1 {
 font-size: 20px;

 @include mq(xl) {
  font-size: 25px;
 }
}

これで、画面幅が1200px以上の時に、h1の文字の大きさが25pxになります。