I'm using Bourbon Neat in my project and Neat has this neat (ha!) little mixin for media queries:
$xs-media: new-breakpoint(min-width 1px max-width 480px);
@include media($xs-media) {
// your styles
}
But @include media
doesn't support multiple breakpoints. So I'm trying to do this:
@mixin multiple-media($breakpoints...) {
@each $breakpoint in $breakpoints {
@include media($breakpoint) {
@content
}
}
}
I can then use multiple breakpoints on it:
$xs-media: new-breakpoint(min-width 1px max-width 480px);
// $sm-media: ...
// $md-media: ...
@inlclude multiple-media($xs-media, $sm-media, $md-media) {
// my styles
}
But the compiled CSS doesn't quite work and look right. This is what gets generated (Just an example of what happens):
@media screen and (min-width: min-width) {
.instagram-widget .instagram-widget__images-container > a > img {
width: 25%; } }
@media screen and (min-width: min-width) {
.instagram-widget .instagram-widget__images-container > a > img {
width: 25%; } }
@media screen and (min-width: min-width) {
.instagram-widget .instagram-widget__images-container > a > img {
width: 25%; } }
@media screen and (min-width: min-width) {
??