Scss サイトの基本設定を変数にして一元管理する

@charset "utf-8";
// ==============================
//　サイトの基本設定
//　==============================


//　幅の関係-----------------------
    $width-base: 1200px; // 全体
    $width-main: 800px; // メインエリアの幅
    $width-side: 400px; // サイドバーの幅

// フォント関係の設定
    $font-base: "You Gothic", Sans-Serif;
    $font-serif: "Yu Mincho", serif;

//  色関係の設定-------------------
    //サイトカラー
    $color-main: #0062b2;
    $color-sub: #0062b2;
    //フォントカラー
    $color-font: #333;
    //リンクカラー
    $color-link: #ff8c28;

// ブレイクポイント-----------------
    $breakpoints: (
        'sm': 'screen and (max-width: 414px)',
        'md': 'screen and (max-width: 767px)',
        'lg': 'screen and (max-width: 999px)',
        'xl': 'screen and (max-width: 1199px)',
    ) !default;

    //上で設定した変数をmq（）で呼び出せるようにmixinを定義
    @mixin mq($breakpoint: md) {
        @media #{map-get($breakpoints, $breakpoint)} {
            @content;
        }
    }