Sassの@mixinでレスポンシブ対応（Sass記法）

自力でレスポンシブ対応しようぜ！

レスポンシブ対応とは

#

一応説明するとWebページのデザインが画面サイズに合わせて変化するようにすることです。

少なくともPCサイズとスマフォサイズは用意したいところ

どうやるのか

#

CSSでmediaQueryという仕組みを使って画面サイズごとのデザインを指定します。

こんな感じ

//基本的にはここが適用される
p {
 color:red;
}

@media screen and (min-width:400px) { 
　　//　画面サイズが400px以上ならこの中の定義が適用される
　　//（デスクトップサイズから小さくしていくと考えると400pxまではこの中の定義が適用されるとも言える）
  p { color:blue;}
  }

}

//max-widthもあるけど基本的にどちらかでいい

こんな感じに書くと400px以上とそれ以下の時で見た目を分けることができます。便利。

SassでクールにMediaQueryを使うには？

#

Sassのmixinという機能を使うとちょっとクール。

mixinに関してはググってください。そのうちちゃんとやりたいね。

で、どうなるかというとこんな感じ。

//デザインの変更のタイミングとなる画面幅（breakPointって呼ぶらしい）を定義
$sm: 400px　//スマホ
$md: 768px//中間
$xl: 1200px//PC

//=だとlinterに怒られる（コンパイルは通る）
@mixin mq($breakpoint: $sm)
  @media screen and (min-width: #{$breakpoint} )
    @content

//sass記法なら=でかける
//（linterには怒られたりするので注意（コンパイルは通る））
//= mq($breakpoint: $sm)
//  @media screen and (min-width: #{$breakpoint} )
//    @content

//使う
//+は@includeの短縮系。scss記法だと使えないかも？なので@includeにかき変えてください
//画面幅0~399pxまでは幅100%
//400px以上なら幅を400pxにして真ん中に寄せる
//1200pxからはまた100%
.container
  width: 100%
  +mq($sm)
    margin: 0 auto
    width: $sm
  +mq($xl)
    width: 100%

こんな感じで各クラスごと、画面サイズごとに簡単に指定することができるわけです。
クールですね。

クラスの中で画面サイズ指定するんじゃなくて画面サイズごとにクラス指定する書き方も考えられますがどっちがメジャーなんですかね？

まあ前者（今回の書き方）のほうが読みやすいと個人的には思うのでとりあえずこのままやってみようと思います。

いやーそれにしてもSass、便利ですね。

ではまた。