レスポンシブなサイトを作っている時に、メディアクエリの指定を毎回書くのがめんどくさいなと思ったので、Sassを使ってシンプルに出来る方法をメモしておきます。 変数でブレイクポイントを設定する SCSSを新規作成し、何px以上で表示が切り替わるかを変数で指定していきます。今回はcssフレームワーク「Pure」を参考に、以下のようにしてみました。 $widthXL: 1280px; //PC大 $widthLG: 1024px; //PC小 $widthMD: 768px; //タブレット $widthSM: 568px; //スマートフォン @mixin設定 上で設定した変数を使いながら、簡単に呼び出せるようにmixinとして設定していきます。 @mixin mqXL { //$widthXL(1280px)以上の場合 @media (min-width: $widthXL) { @cont
![Sassの@contentを使ってメディアクエリを簡単指定 | RCBlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/349ca0a1a359c793f3da16aa480fca8448625acf/height=288;version=1;width=512/http%3A%2F%2Fruucb.com%2Fblog%2Fwp-content%2Fuploads%2F2015%2F02%2Feyecatch.jpg)