0

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) { ??

  • 1
    What do you use to compile the SCSS? I just recreated this in codepen - http://codepen.io/anon/pen/eZjWxN and if you click on 'View compiled' in the CSS block, it looks just fine, so I think it's your compiler problem. – Foxhoundn Apr 22 '16 at 10:25
  • @Foxhoundn thanks for having a look. I'm using node-sass/llibsass https://www.npmjs.com/package/node-sass . This is so frustrating –  Apr 22 '16 at 10:27
  • 1
    What sass version are you using? I just tried it and there was no problem with Sass 3.4.22 (Selective Steve). – Foxhoundn Apr 22 '16 at 10:46
  • @Foxhoundn I was using node-sass ^3.5.0 and I changed it to ^3.5.3 and it's working now! :D –  Apr 22 '16 at 10:59

0 Answers0