Sass Mixin - Media queries generator

_media-queries.scss

// Demo & Documentation : https://codepen.io/davidpollet/pen/QKbQzB
$base-font-size: 16px !default;
// Mobile first media queries
@mixin respond-from($value, $respond-direction: width, $orientation: null) {
  // Convert pixel in em
  $value-em: ($value / $base-font-size) + 0em;

  @if $orientation !=null {
    @media (min-#{$respond-direction}: $value-em) and (orientation: $orientation) {
      @content;
    }
  } @else {
    @media (min-#{$respond-direction}: $value-em) {
      @content;
    }

    // Prevent Error
    @if $respond-direction !="width" and $respond-direction !="height" {
      @error "Wrong direction : must be width or height";
    }
    @elseif $orientation != null and $orientation !="portrait" and $orientation !="landscape" {
    @error "Wrong orientation : must be portrait or landscape";
  }
  }
}

// Desktop first media queries
@mixin respond-until($value, $respond-direction: width, $orientation: null) {
  // Convert pixel in em
  $value-em: ($value / $base-font-size) + 0em;

  @if $orientation !=null {
    @media (max-#{$respond-direction}: $value-em) and (orientation: $orientation) {
      @content;
    }
  }  @else {
    @media (max-#{$respond-direction}: $value-em) {
      @content;
    }
  }

  // Prevent error
  @if $respond-direction !="width" and $respond-direction !="height" {
    @error "Wrong direction : must be width or height";
  }
  @elseif $orientation != null and $orientation !="portrait" and $orientation !="landscape" {
    @error "Wrong orientation : must be portrait or landscape";
  }
}


// two media queries
@mixin respond-between($value1, $value2, $respond-direction: width, $orientation: null) {
  $value1-em: ($value1 / $base-font-size) + 0em;
  $value2-em: ($value2 / $base-font-size) + 0em;
  @if $orientation !=null {
    @media (min-#{$respond-direction}: $value1-em) and (max-#{$respond-direction}: $value2-em) and (orientation: $orientation) {
      @content;
    }
  }  @else {
    @media (min-#{$respond-direction}: $value1-em) and (max-#{$respond-direction}: $value2-em) {
      @content;
    }
  }

  // Prevent error
  @if $respond-direction !="width" and $respond-direction !="height" {
    @error "Wrong direction : must be width or height";
  }
  @elseif $orientation != null and $orientation !="portrait" and $orientation !="landscape" {
    @error "Wrong orientation : must be portrait or landscape";
  }
}