Sass入門！＠mixinを使ったレスポンシブ対応ブレークポイントの記述方法を詳しく解説！

2021年9月5日 14:50

今回は、はにわまさんの記述したSassを使ってレスポンシブ対応のブレークポイントを作る方法を細かく解説していきます。

はにわまんさんが記述した内容をそのまま使えばレスポンシブ対応になるのですが、アレンジする場合には理解しておいたほうがよいと思います。

そこで僕が調べたことをすべて解説していきます。
以下の書籍も参考にしました。

それでは以下がはにわまんさんの記述した内容になります。

Sass

// レイアウト幅
$layout-width-inner: 1180px;   ①

// ブレークポイント
$breakpoints: (
	"sp": "screen and (max-width: 767px)",　　　　　②
	"tab": "screen and (max-width: #{$layout-width-inner - 1px})",　　　②'
	"pc": "screen and (min-width: #{$layout-width-inner})",　　　②''
);
// メディアクエリー
@mixin mq($breakpoint: sp) {　　　　③

	@media #{map-get($breakpoints, $breakpoint)} {　　　　④

		@content;　　　　⑤
	}
}

.item {
	width: 360px;
	margin: 0 50px 50px 0;

	@include mq('tab') {　　　　　　　　⑥
		width: calc(33.33333333% - 20px);
		margin-right: 30px;
		margin-bottom: 30px;
	}

	@include mq('sp') {　　　　　　⑦
		width: 100%;
		margin-right: 0;
	}
}

Sassをコンパイルすると以下になります。

css

.item {
	width: 360px;
	margin: 0 50px 50px 0;
}

@media screen and (max-width: 1179px) {

	.item {
		width: calc(33.33333333% - 20px);
		margin-right: 30px;
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 767px) {

	.item {
		width: 100%;
		margin-right: 0;
	}
}

この流れの大筋を解説します。
記述してあるコードの右側に①などの番号が振ってあるのでそこを確認してください。

⑥が実行される想定で解説していきます。⑦も同じなので解説は割愛しますね。

⑥は@includeでmixinが呼び出されます。
引数がtabなのでmixin名がmqのmixinを探して引数にtabが入ります。

次に④のget-map関数が実行されます。
get-map関数はマップ型変数を呼び出すので、引数がtabなので②'の値（ "screen and (max-width: #{$layout-width-inner - 1px})"）が呼び出されます。

そして②'の条件が画面の横幅が1179px以下になったらというものなので、この条件が満たされた場合に⑥の{}内である以下の条件が実行されるという仕組みになっています。

@include mq('tab') {　　　　　　　　⑥
		width: calc(33.33333333% - 20px);
		margin-right: 30px;
		margin-bottom: 30px;
	}

それではもう少し詳しく解説していきますね。

変数宣言

// レイアウト幅
$layout-width-inner: 1180px;

①の$layout-width-inner: 1180px;　これは変数宣言をしています。

1180 pxを$layout-width-innerに代入しています。

今後$layout-width-innerが出てきたときには1180pxと考えればいいです。

変数宣言の仕方は、$変数名：　値；です。

$（ダラー）で変数名を宣言して:（コロン）で値と区切り、;（セミコロン）で閉じる形となる。

マップ型変数

// ブレークポイント
$breakpoints: (
	"sp": "screen and (max-width: 767px)",
	"tab": "screen and (max-width: #{$layout-width-inner - 1px})",
	"pc": "screen and (min-width: #{$layout-width-inner})",
);

これはマップ型変数といって、通常の変数とは異なり配列のように複数のデータを扱うことができます。

構文は$マップ名: (キー名: 値, キー名: 値, キー名: 値,);になります。

キー名にはクォーテーションがなくても動作しますが、あったほうが良いみたいです。

詳しくはこちらブラック・ライヴズ・マターを参考にしてください。

値に関しては数値や文字列、色、などを使うことができます。

今回の場合はデータタイプのString型（文字列）として扱うためクォーテーションで囲まないとエラーになってしまいます。

それではもう少し詳しく説明すると、

②の"sp"がキーになり "screen and (max-width: 767px)",が値になります。
画面上の最大幅が767pxになったらという意味です。

次の②’の"tab"がキーで、
"screen and (max-width: #{$layout-width-inner - 1px})"が値になり1180pxから1px引いた最大幅が1179pxになったらという意味です。

ここで出てきた#{}はインターポレーションといい、数値や変数などの値をSASS上の計算や文字列として扱うことのできる機能です。

②''の"pc"もほぼ同じで最小幅が1180px以上の場合となります。

@mixin

// メディアクエリー
@mixin mq($breakpoint: sp) {

	@media #{map-get($breakpoints, $breakpoint)} {

		@content;
	}
}

次はmixinについての説明です。

mixinは@mixin mixin名(引数名)｛......} の中で記述したものが@include　mixin名()で呼び出せるというものですね。

③の@mixin mq($breakpoint: sp) {......}はmixin名であるmqに引数の$breakpointを入れてあり、$breakpoint: spとすることで初期値とすることができます。
この場合は初期値は最大幅767pxが初期値に設定されています。

ちなみに@include mp()のように()内に何も記述しないと初期値が実行されます。
今回の場合は最大幅767pxです。

次の④の@media #{map-get($breakpoints, $breakpoint)} {....... }はメディアクエリで #{map-get($breakpoints, $breakpoint)}この条件を満たすときに⑤の@content;が実行されるということです。

#{}に関してはさきほど説明したインターポレーションです。

map-get($breakpoints, $breakpoint)はmap-get()関数といいマップ型変数専用の関数で指定したキーを取得することができます。

構文はmap-get(マップ名, キー); で第1引数にマップ名を入れ、第2引数に取り出したい値のキー名を入れます。

次の⑤の@content;ですがメディアクエリを呼び出したときに使えるもので、スタイルなどをmixinに渡す機能です。

@contentは@includ内で記述した内容が代入されます。

@includ

.item {
	width: 360px;
	margin: 0 50px 50px 0;

	@include mq('tab') {　　　　　　　　⑥
		width: calc(33.33333333% - 20px);
		margin-right: 30px;
		margin-bottom: 30px;
	}

	@include mq('sp') {　　　　　　⑦
		width: 100%;
		margin-right: 0;
	}
}

mixinを読み出すには@includ mixin名()で読み出します。
ただ今回はブレークポイントなので呼び出しただけでは意味がありませんよね。
条件があった場合に実行する処理を記述しなければいけません。

その処理を@includ mixin名()｛......｝の{}内に記述します。

記述した内容が@contentの中に代入されます。

今回の場合、引数がtabの場合は以下が代入されます。

width: calc(33.33333333% - 20px);
margin-right: 30px;
margin-bottom: 30px;

引数がspの場合は以下が代入されます。

width: 100%;
margin-right: 0;

解説は以上となります。

最後まで読んでいただきありがとうございました。

Sassを詳しく勉強したい場合はこちらの本がとても参考になります。