メディアクエリー

ブラウザのウインドウ幅によりスタイルを指定する方法です。

margin-top: 10em;
@include xl {
	margin-top: 5em;
}

のような感じでmixinを呼び出します。

//xlサイズ1440pxより小さい場合に適用
@mixin xl($xl: 1440px) {
	@media only screen and (max-width: $xl) {
		@content;
	}
}


//lgサイズ1280pxより小さい場合に適用

@mixin lg($lg: 1280px) {
	@media only screen and (max-width: $lg) {
		@content;
	}
}


//mdサイズ1024pxより小さい場合に適用
@mixin md($md: 1024px) {
	@media only screen and (max-width: $md) {
		@content;
	}
}

//smサイズ768pxより小さい場合に適用
@mixin sm($sm: 768px) {
	@media only screen and (max-width: $sm) {
		@content;
	}
}

//xsサイズ576pxより小さい場合に適用
@mixin xs($xs: 576px) {
	@media only screen and (max-width: $xs) {
		@content;
	}
}