CSSメディアクエリーの適用

selecter以外で設定する方法もありますが、size.scssという名前のファイルを作成して、よく使うスタイルとブレークポイントを設定することができます.

- size.scss

$desktop-max-size: "screen and(max-width:1200px)";

$変数名:「ブレークポイントの設定」で、上記のように設定したいサイズを設定します.
以下のように使用できます.

- main.scss

.bottom{
	@media #{desktop-max-size}{
		font-size:13px;
  		color:red;
	}
}

設定したいブレークポイントを変数に設定することで、より簡潔なコードを作成できます.
また、size.scssファイル内で変数を指定し、メディアクエリに適用してスタイル設定を行うこともできます.

- size.scss

- main.scss