SCSSでブレイクポイントの書き方（俺流）

マルチデバイスのWEBサイトを作る際に、CSSで無くてはならないブレイクポイント。

@media print,screen and (min-width:768px) {

.hogehoge {
	font-size:1.25rem;
	color:#ff0000;
}

}

こういうやつです。

人によって書き方はまちまちだと思うが、俺は、CSSの時代はこう書いてた。

.hogehoge {
	font-size:1rem;
	color:#0000ff;
}
.hogehoge2 {
	font-size:1rem;
	font-weight:400;
}
.hogehoge3 {
	padding:10px;
	background:#ffcc00;
}

@media print,screen and (min-width:768px) {

.hogehoge {
	font-size:1.25rem;
	color:#ff0000;
}
.hogehoge2 {
	font-size:1.125rem;
	font-weight:500;
}
.hogehoge3 {
	padding:20px;
}

}

最初に768px以下のデバイス（モバイル）の定義を書いて、その後で、769px以上のPCの定義を書く、いわゆる、モバイルファーストです。

この例だと、要素が3つしかないので、ある要素を見る際に、エディタ上でさほどスクロールしなくて済むが、要素が多くなると、上に下にスクロールしながら見ないといけないので、それが苦痛だった（笑）。

かと言って、要素毎に、ブレイクポイントを指定すると、下記の様に、@media があちこちにあって、非常に乱雑。しかも、ブレイクポイントを変更しようもんなら、訂正しないといけない部分が非常に多くなる。

.hogehoge {
	font-size:1rem;
	color:#0000ff;
}
@media print,screen and (min-width:768px) {
.hogehoge {
	font-size:1.25rem;
	color:#ff0000;
}
}

.hogehoge2 {
	font-size:1rem;
	font-weight:400;
}
@media print,screen and (min-width:768px) {
.hogehoge2 {
	font-size:1.125rem;
	font-weight:500;
}
}

.hogehoge3 {
	padding:10px;
	background:#ffcc00;
}
@media print,screen and (min-width:768px) {
.hogehoge3 {
	padding:20px;
}
}

SCSSはCSSに比べて、階層構造を持てたり、非常に分かりやすく書けるので、このブレイクポイントも、分かりやすく書けると非常にありがたい。

そこで、俺は、下記のように書いている。

//----------------------------------------
//	breakpoint
//----------------------------------------
//スマホ
@mixin sp($breakpoint:768) {
	@media screen and (max-width:$breakpoint+px) {
		@content;
	}
}
//PC
@mixin pc($breakpoint:769) {
	@media print,screen and (min-width:$breakpoint+px) {
		@content;
	}
}

.hogehoge {
	font-size:1rem;
	color:#0000ff;
	@include pc() {
		font-size:1.25rem;
		color:#ff0000;
	}
}

.hogehoge2 {
	font-size:1rem;
	font-weight:400;
	@include pc() {
		font-size:1.125rem;
		font-weight:500;
	}
}

.hogehoge3 {
	padding:10px;
	background:#ffcc00;
	@include pc() {
		padding:20px;
	}
}

まず最初に、@mixin を使ってブレイクポイントの定義を行う。その後は、各要素でモバイルの定義をし、その後で、@include PC() を使って、PCでの定義を行う。

これなら、各要素の中で、モバイルとPCの定義が完結し、しかも、@media は書かなくてもいいので、見た目も非常にすっきりする。

ブレイクポイントのを変えたい時は、先頭の定義部分だけ変えればいい。

また、ある時だけ800pxでブレイクさせたい時は、下記の様に、pc()に引数（？）にピクセル数を書けば良い。

.hogehoge {
	font-size:1rem;
	color:#0000ff;
	@include pc(800) {
		font-size:1.25rem;
		color:#ff0000;
	}
}

SCSSも人によって書き方はまちまちだと思うが、俺としては、これが一番しっくりくる書き方です。