Sass(SCSS)を使って効率的にコーディングをするための基本設定

Sassには便利な書き方がたくさんあるのですが、都度調べるのも面倒なので便利そうなコードを簡単にまとめました。

ブレイクポイントの設定

// ブレイクポイント -------------------------------------
  $breakpoints: (
    pc: "screen and (min-width:840px)",
    sp: "screen and (max-width:839px)",
    lg: "screen and (min-width:1280px)",
    md: "screen and (max-width:1279px) and (min-width: 960px)",
    sm: "screen and (max-width:959px) and (min-width:600px)",
    xs: "screen and (max-width: 599px)",
  );
  @mixin media($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
      @content;
    }
  }
  //大まかにPCとSPでの表示切替用
  .pc {
    @include media(pc) {
      display: inherit !important;
    }
    @include media(sp) {
      display: none !important;
    }
  }
  .sp {
    @include media(pc) {
      display: none !important;
    }
    @include media(sp) {
      display: inherit !important;
    }
  }

「pc」と「sp」の二つのブレイクポイントは大まかにパソコンとスマホで表示・非表示を切り替えるために用意しています。
残り4つのブレイクポイントはBootstrapをベースに設定。ただし、タブレット周りのサイズはiPadのサイズに限定することなくある程度柔軟に対応出来るようにカスタムしています。

画像へのパス

背景画像を指定する際に使用。

// imgpath ----------------------------------------
  $imgpath:"../img/";
  //使用例 background: url(#{$imgpath}hoge.jpg);

clearfix

float自体あまり使うことはないんですが、稀に使うこともあるので念の為

// clearfix ---------------------------------------
  @mixin clearfix {
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
  //使用例 @include clearfix;

フォント指定

// font -------------------------------------------
  @import url("https://fonts.googleapis.com/css?family=Lato:400,900");
  @import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");
  $font-base: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  $font-serif: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;

明朝体は参考までに入れてますが、実際に使用する際はAdobe Fonts、または源ノ明朝あたりが良いと考えています。

色関係の指定

// color ------------------------------------------
  $clr-font: #333;
  $clr-base: #fff;
  $clr-main: #fff20d;
  $clr-accent: #870bf0;
  //使用例 color: $clr-main;

clr-blueなど色数が多いサイトであれば個別に指定する場合もありますが、汎用性を考えて通常はこれくらいの指定にとどめておく事が多いです。

まとめ

この辺りをまとめて_base.scssといったファイルに記述しておくと基本設定の一元管理がしやすいですね。

// ==================================================
// サイトの基本設定
// ==================================================

// breakpoint -------------------------------------
  $breakpoints: (
    pc: "screen and (min-width:840px)",
    sp: "screen and (max-width:839px)",
    lg: "screen and (min-width:1280px)",
    md: "screen and (max-width:1279px) and (min-width: 960px)",
    sm: "screen and (max-width:959px) and (min-width:600px)",
    xs: "screen and (max-width: 599px)",
  );
  @mixin media($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
      @content;
    }
  }
  //大まかにPCとSPでの表示切替用
  .pc {
    @include media(pc) {
      display: inherit !important;
    }
    @include media(sp) {
      display: none !important;
    }
  }
  .sp {
    @include media(pc) {
      display: none !important;
    }
    @include media(sp) {
      display: inherit !important;
    }
  }

// imgpath ----------------------------------------
  $imgpath:"../img/";
  //使用例 background: url(#{$imgpath}hoge.jpg);

// clearfix ---------------------------------------
  @mixin clearfix {
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
  //使用例 @include clearfix;

// font -------------------------------------------
  @import url("https://fonts.googleapis.com/css?family=Lato:400,900");
  @import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");
  $font-base: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  $font-serif: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;

// color ------------------------------------------
  $clr-font: #333;
  $clr-base: #fff;
  $clr-main: #fff20d;
  $clr-accent: #870bf0;
  //使用例 color: $clr-main;