[sass,css,メディアクエリ]sassでメディアクエリを書くときに簡単だなって思った方法

スマホ対応、タブレット対応のWEBを作るときに使われるレスポンシブWEBデザイン。
これはメディアクエリが必須となっています。

ボクは日頃レスポンシブWEBデザインは使用しません。
なぜなら面倒くさいし、ボクの技量ではデザインが限られてくるからwww

それでも試練はやってくるのです。

てことでSassでメディアクエリを書く方法は色々とありますが、間に合わせ的な書き方を発見しましたのでメモっておきます。

ブレイクポイントは変数に!

ブレイクポイントを毎回書くのが面倒くさいので変数に書いちゃいましょう。

$phone: "only screen and (max-width:640px)";
$tablet: "only screen and (min-width:641px) and (max-width:959px)";
$pc: "only screen and (min-width:960px)";

変数の使い方

@media #{$phone} {
    //640px以下
}
@media #{tablet} {
    //641px〜959pxまで
}
@media #{pc} {
    //960px以上
}

上記のように書けば大丈夫です。

実践

実際に実践のように書くと以下の様になります。

Sass

.hoge {
    border: 1px solid #ccc;
    width: 1000px;
    @media #{$phone} {
        width: 100%;
    }
    @media #{$tablet} {
        width: 700px;
    }
}

CSS

.hoge {
  border: 1px solid #ccc;
  width: 1000px;
}
@media only screen and (max-width: 640px) {
  .hoge {
    width: 100%;
  }
}
@media only screen and (min-width: 641px) and (max-width: 959px) {
  .hoge {
    width: 700px;
  }
}

という風に普通にネストして書けます。

まとめ

ただし通常のSassにそってネストして書いていくのでコンパイルしたCSSの長いこと長いこと・・・。
その他にも@extendが使えなかったりするようですので、間に合わせ程度に覚えておくといいでしょう。