メディアクエリを登録し呼び出す

１. ブレイクポイントを変数登録する

ブレイクポイントを変数として登録する

• $sp:400px;
• $tab:767px;
• $pc:960px;

２. メディアクエリを変数登録する

変数登録したブレイクポイントを@mixinを使って定義し、使用時は@includeを使って呼び出す

３. ＠include を使って呼び出す

使う場所で@includeを使って呼び出すのだが、別ファイルとしてmixinを作成する場合は@useでファイルを読み込む場合は変数の前にファイル名が必要になるので
@useで読み込みをする時にファイルの略称を登録しておくといい。

<div class="brack-bg">
<p>@use "_mixin.scss" as m;</p
</div>

上記の場合は、ファイル名が「_mixin.scss」
表記するための略称は「as」の後に書き（今回の場合は「m」）@includeで呼び出す時に「 . 」（ドット）で繋ぎ、定義した＠mixinを呼び出す。

@include　<ファイル名もしくは、その略称＞　.　<@mixinの名前>

@include m.sp {
width: 100%;
}

@mixin sp {
@media ($sp > width) {
@content;
}
}

@mixin tab {
@media ($tab > width) {
@content;
}
}

@mixin pc {
@media ($pc > width) {
@content;
}
}