【コピペで使える！】mixinと変数を使用したSassのレスポンシブ対応方法

スマートフォンの普及により、Web制作では、レスポンシブ対応が必須になってきました。

レスポンシブ対応って、思ったより体力を使いますよね。

この記事では、

レスポンシブ対応が楽に出来る方法を知りたい！

という方のために、Sassのmixinを使用したレスポンシブ対応方法を伝授します！！

初めにまとめて答えを書いて、その後に説明をしていきます！

記述内容と使用方法

記述する内容は下記の通りです！

↓↓ ①ブレークポイントの指定

$breakpoints: (
  "sp": "screen and (max-width: 500px)",
  "tab": "screen and (max-width: 900px)",
  "pc": "screen and (max-width: 1200px)"
);

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

まずは、①をSCSSの上部に記述してください！

↓↓　②使用方法

// タブレット幅以下では、ulのpaddingを10pxにする。
ul{
  padding: 20px;

  @include mq(tab){
    padding: 10px;
  }
}

②の@include mq(tab){}を、レスポンシブ対応したい場所に記入してください！

これらが、記述する内容です！

各項目の説明

記述内容が分かったところで、①から簡単に説明していきます！

①の説明

まず初めは、$breakpoints:();の部分についてです！

$breakpoints: (
  "sp": "screen and (max-width: 500px)",
  "tab": "screen and (max-width: 900px)",
  "pc": "screen and (max-width: 1200px)"
);

ここでは、breakpointsという名前のマップを作成し、ブレイクポイントを管理しています！

次は、@mixinの部分です！

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

ここでは、mqという名前のmixinを作成し、引数に$breakpointを指定します！

そして、@mediaや、map-get()関数を使用し、初めに指定したマップの$breakpointsから、ブレイクポイントを取得してきます！

こちらが①についての簡単な説明です！

②の説明

最後に②について説明していきます！

 ul{
  padding: 30px;

  @include mq(sp){
    padding: 10px;
  }
}

②では、@includeを用いて、mixinを呼び出します！

呼び出す場所は、レスポンシブ対応をしたい場所です！

これらを使って、爆速でレスポンシブ対応していきましょう！！