generic media query mixin

media-query.scss

// ------------------------------
// generic media query mixin
// ------------------------------
// author: Anas Nakawa
// license: MIT
// ------------------------------
// table of content
// ------------------------------
// media-compact-retina (private)
// media-conpact-normal (private)
// media
// ------------------------------
// usage:
// @include media($min: 980px) {  }
// @include media($max: 1200px) {  }
// @include media($min: 980px, $isRetina: true) {  }
// ------------------------------

// private mixin
@mixin media-compact-retina($min: 0, $max: null) {

  @if $max == null {

    @media 
      only screen and (-webkit-min-device-pixel-ratio : 1.5) and (min-width: $min), 
      only screen and (min-device-pixel-ratio : 1.5) and (min-width: $min) {
        @content;
     }

  } @else {
    
    @media 
      only screen and (-webkit-min-device-pixel-ratio : 1.5) and (min-width: $min) and (max-width: $max), 
      only screen and (min-device-pixel-ratio : 1.5) and (min-width: $min) and (max-width: $max) {
        @content;
     }

  }

}

// private mixin
@mixin media-compact-normal($min: 0, $max: null) {

  @if $max == null {

    @media only screen and (min-width: $min) {
        @content;
     }

  } @else {
    
    @media only screen and (min-width: $min) and (max-width: $max) {
        @content;
     }

  }

}

// generic purpose media query mixin
//
// * **param:**   {dimension} $min      [optional] minium width
// * **param:**   {dimension} $max      [optional] maximum width
// * **param:**   {boolean}   $isRetina [optional] should target retina displays ?
@mixin media($min: 0, $max: null, $isRetina: false) {

  @if $isRetina == true {
    
    @include media-compact-retina($min, $max) {
      @content;
    }

  } @else {

    @include media-compact-normal($min, $max) {
      @content;
    }

  }

}