本記事では、Sassの@mixin(ミックスイン)を使って、メディアクエリを指定する方法を解説します。下記がコードの全文です。(読みやすいように改行を入れています。)使用しているstyle.scssにコピペすれば@includeでメディアクエリを呼び出せます。}}以下からひとつひとつの手順を解説します。手順1:変数と@mixin(ミックスイン)を指定する変数の指定まず各メディアクエリのブレークポイントを変数で管理します。480px;この部分ですね。任意のpx数を指定してください。しておくことで途中でブレークポイントを変えないといけないときも変数の値を変更するだけですべてに適用できます。@mixin(ミックスイン)を指定する次にmixinを作ります。}}これだけ見るとめちゃくちゃ分かりづらいですが、ミックスインの構文がわかればなんとなく理解できるはず。(ここに@contentが入る)}@contentがややこいと思うかもですが、@includeで呼び出したときに{}の中に入る値が@contentです。@mixinの詳細はまた別の記事で解説します。手順2:@includeで@mixinを呼び出す次に@includeで定義したミックスインを呼び出します。実際に使い方を見たほうが早いので下記。}}CSSのコンパイル結果はこうなります。}}こんな感じで、メディアクエリがかんたんに指定できるぜい!!まとめSassの@mixinを使いこなせばメディアクエリの指定もメチャクチャ簡単になってコード量も格段に減ります。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。け】サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。