CSSでいつも使っているメディアクエリ(Media Queries)をまとめました【CSS/SASS(SCSS)】

ウェブページをいちから作成する場合、Sassでコーディングすることが多くなりました。
ミックスインを使うと、Media Queriesの記述が大変ラクになります。
この為にSassを使っているといっても過言ではない。。でも、いつも記述を忘れるのでメモしておきます。

@charset "UTF-8";
//ミックスイン-メディアクエリ----------------------

@mixin tablet {
    @media screen and (max-width: 767px) {
        @content;
    }
}
@mixin mobile {
    @media screen and (max-width: 640px) {
        @content;
    }
}
@mixin small-mobile {
    @media screen and (max-width: 320px) {
        @content;
     }
 }
@mixin media($width:600) {
    @media screen and (min-width: $width + px) {
        @content;
     }
}

PC用のCSSを記述してから、モバイル用のCSSを追加していきます。PCファーストってやつでしょうか。
いまだにモバイルファーストでのCSS設計が苦手なので、指定がなければこれで制作しています。
@mixin mediaは指定する大きさを変数$widthで変更できるようにしました。

コードの中にある「@conent」は記述したスタイルをミックスインに渡します。
例えば、Sassを次のようにかくと、

SASS–@mixinで記述

.test_area {
    margin-top:60px;
	@include tablet {
	    margin-top:30px; //この部分が@contentに渡される
	}
}

CSSはこのように展開されます。ミックスインの@contentの部分に「margin-top:30px;」が渡されています。

展開されたCSS

//CSS
.test_area { 
    margin-top: 60px;
}

@media screen and (max-width: 767px) {          
    .test_area {
        margin-top: 30px;
    } 
}