forked: Sass(Scss) : メディアクエリ用のミックスイン

Culture27さんの「Sass(Scss) : メディアクエリ用のミックスイン」を読み、マイナー・ブレイクポイントも扱えるようにと自分向けに作ろうとしたものの、あまり良いものはできず。後日何か浮かぶかもしれないのでメモしておく。


Sass


$all: null;
$cond: null;
$breakpoints: 979 767 479;

@mixin mq {
	$all: true;
	@content;
	$all: false;
	@each $bp in $breakpoints {
		$cond: $bp;
		@media only screen and (max-width: #{$bp}px) {
			@content;
		}
	}
}

@include mq {

h1{
	@if $all {
		color: black;
	}
	@if $cond == 767 {
		color: red;
	}
	@if $cond == 479 {
		color: blue;
	}
}

p{
	@if $cond == 767 {
		font-size: 0.75em;
	}
}

}  // end include mq