scssブレイクポイント

マップ型変数を作りブレイクポイントを定義する

//マップ型変数breakpointsを定義
$breakpoints: (
    //キー　　値
    "se": "(max-width: 320px)",
    //320px以下
    "xs": "(max-width: 375px)",
    //375px以下
    "sm": "(max-width: 640px)",
    //640px以下
    "md": "(max-width: 768px)",
    //768px以下
    "lg": "(max-width: 1024px)",
    //1024px以下
    "xl": "(max-width: 1279px)" //1280px以下
) !default;

//メディアクエリ用のmixinを定義。デフォ値はmd
@mixin mq($breakpoint: lg) {
    //map-get(マップ型変数, キー)で値を取得
    @media #{map-get($breakpoints, $breakpoint)} {
        //この中をカスタムできる
        @content;
    }
}

メディアクエリ用のmixin…の部分で
scssをcssのメディアクエリの形にコンパイルする。

使い方

header-navに768px以下のときのcssをかけるとき

  .header-nav {
        margin: 0 auto;
        text-align: center;
        @include mq(md) {
            display: none;
        }
}

768px以下のときのcss例

@include mq(md) {
    header {
        position: fixed;
        background-color: #fff;
        height: 68px;
        .drawer-hamburger-icon,
        .drawer-hamburger-icon:before,
        .drawer-hamburger-icon:after {
            height: 4px;
            width: 26px;
            border-radius: 40px;
            background-color: #3d3d3d;
        }
        .drawer-open .drawer-hamburger-icon:after,
        .drawer-open .drawer-hamburger-icon::before {
            background-color: #fff;
        }
        .header-drawer {
            display: block;
            background-color: #fff;
            height: 68px;
            .drawer-nav {
                padding-top: 145px;
                text-align: center;
                ul li a {
                    padding: 16px;
                    font-family: $font-family-en;
                }
            }
        }
        .drawer-overlay {
            background-color: rgba(0, 0, 0, 0.6);
        }
    }
}