Breakpoint Mixin

_breakpoint-mixin.scss

/// Breakpoint Mixin
/// 
/// @author Henning Pohlmeyer
///
/// @content
///
/// @param {Number} $min - The minimum breakpoint range
/// @param {Number} $max [null] - The maximum breakpoint range
/// @param {Number} $ppi [null] - Exclude screens below a screen density of $ppi 
/// @param {String} $type [screen] - Add a media type other than screen (e.g. print)
///
/// @example scss - Usage
///   @include breakpoint(50px, 120px, 120, 'only screen') {
///     .div { width: 10%; }
///   }
@mixin breakpoint($min, $max: null, $ppi: null, $type: 'screen') {
  
  // Check if $min is bigger than $max
  @if $max and $min >= $max { @error "$min is bigger than or equals $max."; }
  
  // Check if $type is a string
  @if type-of($type) != 'string' { @error "$type: #{$type} is not a string!"; }
  
  // Generate min query part
  @if type-of($min) != 'number' { @error "$min: #{$min} is not a number!"; }
  @if $min == 0 { $min: null; }
  @else { $min: ' and (min-width: #{$min})'; }
  
  // Generate max query part
  @if $max and type-of($max) != 'number' { @error "$max: #{$max} is not a number!"; }
  @if $max { $max: ' and (max-width: #{$max})'; };
  
  // Initialize query
  $query: null;
  
  // Generate query
  @if $ppi and type-of($ppi) != 'number' { @error "$ppi: #{$ppi} is not a number!"; }
  @if not $ppi { $query: #{$type} #{$min} #{$max}; }
  @else {
    $webkit-ppi: 'and (-webkit-min-device-pixel-ratio: #{$ppi / 100})';
    $opera-ppi: 'and (-o-min-device-pixel-ratio: #{$ppi / 10}/10)';
    $default-ppi: 'and (min-resolution: #{ppi}dpi)';
    
    $query: #{$type} #{$webkit-ppi} #{$min} #{$max},
            #{$type} #{$opera-ppi} #{$min} #{$max},
            #{$type} #{$default-ppi} #{$min} #{$max};
  }
  
  // Generate output
  @media #{$query} {
    @content;
  }
}