インナー幅

• PC画面時に担保する幅

メディアクエリのブレークポイント

$layout-width-inner: 1024px;
$breakpoints: (
     "sp": "screen and (max-width: 767px)",
     "tab": "screen and (max-width: #{$layout-width-inner - 1px})",
     "pc": "screen and (min-width: #{$layout-width-inner})"
);

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

.hoge {
     font-size: 16px;
    //blockやelement内でも共通で使える	
     @include mq("sp") {
       font-size: 12px;
     }
}

重なり順(Z-index)

 $layer: (
     modal: 100,
     drawer: 40,
     sp-menu: 35,
     floating: 30,
     header: 20,
     default: 1
   );

   .hoge {
     z-index: map-get($layer, "header");
   }

要素内での重なり順は、定義した値からの相対計算をする

色

• ベーステキストカラー
• メインカラー
• アクティブカラー
• バックグラウンドカラー
  細かく指定すると却って影響範囲がわからなくなるので、確定で統一するものだけ

アセットの管理

/img/
/common/ ・・・ 共通で使う画像
/page01/ ・・・ page01だけで使う画像
/page02/ ・・・ page02だけで使う画像