Media query mixin

@mixin mq-s() {
  @media all and (max-width: $breakpoint-small) {
    @content;
  }
}
@mixin mq-m() {
  @media all and (max-width: $breakpoint-medium) {
    @content;
  }
}
@mixin mq-l() {
  @media all and (max-width: $breakpoint-large) {
    @content;
  }
}
@mixin mq-xl() {
  @media all and (max-width: $breakpoint-xlarge) {
    @content;
  }
}
@mixin mq($size){
  @media all and (max-width: rem($size)) {
    @content;
  }
}

@mixin mq-min($size){
  @media all and (min-width: rem($size)) {
    @content;
  }
}

@mixin mq-range($size1,$size2){
  @media all and (max-width: rem($size1)) and (min-width: rem($size2)) {
    @content;
  }
}

// example
@include mq-s(){ div {display: none;} }