vars.scssに定義した変数での指定

vars.scssの定義

$breakpoints:(
	tablet: 959px,
	sp: 679px
);

max-widthで指定

sass

@include mq(sp) {
	height:40px;
}

css

@media screen and (max-width: 679px) {
	height: 40px;
}

min-widthとmax-widthで指定

sass

@include mq(sp tablet) {
	height:40px;
}

css

@media screen and (min-width: 680px) and (max-width: 959px) {
	height: 40px;
}

min-widthで指定

sass

@include mq(tablet, true) {
	height:40px;
}

css

@media screen and (min-width: 960px) {
	height: 40px;
}

数値での指定

sass

@include mq(679px) {
	height: 40px;
}

css

@media screen and (max-width: 679px) {
	height: 40px;
}