Examples for sb-media Foundry post

_base.scss

@import "mixins"; // contains sb-media mixin
@import "box";

_box.scss

.box {
  background-color: blue;
  @include sb-media(45em) {
    background-color: purple;
  }
}

_mixins.scss

$no-mq-support: false !default;
$serve-to-nomq-max-width: 60em;
 
@mixin sb-media($query) {
  @if $no-mq-support{
    @if $query < $serve-to-nomq-max-width {
      @content;
    }
  } @else {
    @media ( 'min-width:' + $query ) {
      @content;
    }
  }
}

mq.css

/* I'm rendered CSS */

.box {
  background-color: blue;
  @media (min-width: 45em) {
    background-color: purple;
  }
}

mq.scss

@import "base";

no-mq.css

/* I'm rendered CSS */

.box {
  background-color: blue;
  background-color: purple;
}

no-mq.scss

$no-mq-support: true;
@import "base";