Sassのmixinの設定

レスポンシブWebデザインをする際にメディアクエリが必要になりいちいち、同じコードを複数回書くのも数値の管理もめんどくさいのでmixinで簡単に書けるようにします。

ブレイクポイントの設定

最初はこのくらいで設定しておいて、随時増やしていくとよい

$breakpoints:(
 sm: 480px,
 md: 768px,
 xl: 1200px
);

メディアクエリを呼び出す

minとmaxを使えるようにしている
ブレイクポイントが被ってて気になる場合はブレイクポイントの指定をminとmaxで分ける方が良いかもしれない

@mixin mq-up($breakpoint:md,$range:min){
 @media (#{$range}-width:#{map-get($breakpoints,$breakpoint)}){
   @content;
 }
}

@mixin mq-down($breakpoint:md,$range:max){
 @media (#{$range}-width:#{map-get($breakpoints,$breakpoint)}){
   @content;
 }
}

使い方

.scssファイルでの使い方
（書き方間違えているので修正9/17）

body{
//コード
  @include mq-up(sm){
    //コード
  )
}

body{
//コード
  @include mq-down(sm){
    //コード
  )
}

@media (min-width: 480px) {
 body {
   //元に書いたコード
 }
}
@media (max-width: 480px) {
 body {
   //元に書いたコード
 }
}

最後に

max-widthしか使っていなかったので、適当にminを追加した