mixinでメディアクエリ

code:scss

@mixin media($width) {

@media only screen and (max-width: $width) {

@content;

}

}

@include media(320px) {

background: yellow;

}

これで、メディアクエリの省略ができる

長いメディアクエリの指定を繰り返したいときに良い

code:scss

$bp: 600px;

@mixin sp() {

@media only screen and (max-width: $bp - 1px) {

@content;

}

}

@mixin pc() {

@media only screen and (min-width: $bp) {

@content;

}

}

こういう感じにわけると楽

include時に引数がなければ省略ができる

@include pc { ~~~ }