【SCSS】メディアクエリを簡単に書く

SCSSで簡単にメディアクエリを使用する方法を共有します。

SCSSでメディアクエリを簡単に書く方法

scssで先に下記の設定を書いておきます。

// breakpointの設定
$mq-breakpoints: (
    xl: 1440px,
    lg: 1280px,
    md: 1024px,
    tb: 768px,
    sm: 576px,
    xs: 414px) !default;

// Media Queryの設定
@mixin mq($breakpoint: md, $rule: min, $subtraction: false) {
    $breakpoint: map_get($mq-breakpoints, $breakpoint);

    @if $rule==max and $subtraction {
        $breakpoint: $breakpoint - 0.0625;
    }

    @media screen and (#{$rule}-width: $breakpoint) {
        @content;
    }
}

 

使用するときは、下記のように書きます。

下記が「画面サイズが1024pxからcolor:redにする」という形になります。

@include mq(md) {
     color: red;
}

 

これで、CSSで書く下記と同じ意味になります。

@media screen and (min-width: 768px){ 
     color:red;
}

 

各サイズでの書き方

画面サイズが1440pxからの場合

@include mq(xl) {
     // ...
}

 

画面サイズが1280pxからの場合

@include mq(lg) {
     // ...
}

 

画面サイズが1024pxからの場合

@include mq(md) {
     // ...
}

もしくはmdはデフォルトの値に設定しているので、

@include mq() {
     // ...
}

 

画面サイズが768pxからの場合

@include mq(tb) {
     // ...
}

 

画面サイズが576pxからの場合

@include mq(sm) {
     // ...
}

 

画面サイズが414pxからの場合

@include mq(xs) {
     // ...
}

 

一部、デスクトップファーストにしたい場合

@include mq(md, max) {
     // ...
}

 

各サイズを変更したい場合

下記を変更してください。

$mq-breakpoints: (
    xl: 1440px,
    lg: 1280px,
    md: 1024px,
    tb: 768px,
    sm: 576px,
    xs: 414px) !default;

 

事前の設定をデスクトップファーストにしたい場合

@media screen and (max-width: 768px)のような形にしたい時、下記のように変更してください。

// $rule: min をmax に変更
@mixin mq($breakpoint: md, $rule: max, $subtraction: false) {
    $breakpoint: map_get($mq-breakpoints, $breakpoint);

    @if $rule==max and $subtraction {
        $breakpoint: $breakpoint - 0.0625;
    }

    @media screen and (#{$rule}-width: $breakpoint) {
        @content;
    }
}

 

以上です!