Sassを使ってレスポンシブサイトをコーディングしてみる

素材
https://yachin29.com/school/0815test.zip

レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。
またブレイクポイントやメインのカラーコードを変数化する事で効率化が図れます。

さらに、今回はmarginやpaddingの値を8pxの倍数に設定します。

変数の設定

$point-tablet: 959px;
$point-sp: 767px;

mixinの使い方

@mixin 名前 {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}

body {
  background: #222;
  @include tablet {
      background: #f00;
  }
   @include sp {
      background: #df9e3d;
  }
}