Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

//************************************************************************//
// Strip Unit
// http://stackoverflow.com/a/12335841/673457
//************************************************************************//
@function strip( $val ) {
  // Make sure $val is a number first
  @if type-of( $val ) == 'number' {
    @return ($val / ($val * 0 + 1));
  }
  // Return same value otherwise
  @else {
    @warn "Cannot strip units as value is not a number: #{$val}";
    @return $val;
  }
}

//************************************************************************//
// Requires: "strip"
//
// Description: Media Query Helper
//
// Examples: http://sassmeister.com/gist/11261921
//
// References:
// http://alwaystwisted.com/post.php?s=2013-04-01-my-media-query-mixin
// http://jakearchibald.github.io/sass-ie/
//************************************************************************//

// For browsers that do not support media queries, create a separate stylesheet
// and set $fixed-width to the desired width. This will allow any styles in
// media queries that are less than the fixed width to be inserted directly.
$fixed-width: false !default;

// To break up a stylesheet into separate files based on breakpoints, set cutoff
// vars in each sheet and only matching media queries will be outputted.
$mq-min-cutoff: false !default;
$mq-max-cutoff: false !default;

//------------------------------------------------------------------------//
// Helper function to check if media query falls within a fixed width
//------------------------------------------------------------------------//
@function mq-width-check( $mq-prefix, $mq-width, $cutoff: $fixed-width, $cutoff-prefix: 'max' ) {
  // Check to make sure width is a number
  @if type-of( $mq-width ) == 'number' {
    @if unitless( $mq-width ) {
      $mq-width: $mq-width * 1px;
    }
    // em or rem
    @else if unit( $mq-width ) == 'em' or unit( $mq-width ) == 'rem' {
      $mq-width: strip( $mq-width ) * 16px;
    }
  }
  @else {
    @warn "Media query value is not a number: #{$width}";
    @return false;
  }

  // Compare width to cutoff
  @if $cutoff-prefix == 'max' {
    @if $mq-prefix == 'min' and $mq-width <= $cutoff {
      @return true;
    }
    @else if $mq-prefix == 'max' and $mq-width >= $cutoff {
      @return true;
    }
    @else {
      @return false;
    }
  }
  @else if $cutoff-prefix == 'min' {
    @if $mq-prefix == 'min' and $mq-width >= $cutoff {
      @return true;
    }
    @else if $mq-prefix == 'max' and $mq-width >= $cutoff {
      @return true;
    }
    @else {
      @return false;
    }
  }
  @else {
    @warn '$cutoff-prefix of “#{$cutoff-prefix}” is not valid in mq-width-check()';
    @return false;
  }
}

//------------------------------------------------------------------------//
// Media Query Mixin
//------------------------------------------------------------------------//
@mixin mq( $breakpoints... ) {
  // Check for fixed width or media query cutoff variables
  $hasCutoff: $fixed-width or $mq-min-cutoff or $mq-max-cutoff;

  // If onyl one argument passed, set $brakpoint equal to that argument
  @if length( $breakpoints ) == 1 {
    $breakpoints: nth( $breakpoints, 1 );
  }

  //------------------------------------------------------------------------//
  // Sass Map Argument
  //
  // Example: mq(( condition: value[, condition: value, ...] ))
  //------------------------------------------------------------------------//
  @if type-of( $breakpoints ) == 'map' {
    // Convert breakpoints map to media query string
    $mq-conditions: '';
    @each $type, $value in $breakpoints {
      $mq-conditions: str-insert( $mq-conditions, 'and (#{$type}: #{$value})', -1);
    }

    // Check for cutoff vars, run tests if present
    @if $hasCutoff {
      $pass-test: false;

      // Loop through each media-query condition and test
      @each $type, $mq-width in $breakpoints {
        $split-index: str-index( $type, '-' );
        $prefix: str-slice( $type, 1, $split-index - 1 );
        $suffix: str-slice( $type, $split-index + 1, -1 );
        // Only test the width, ignore min/max-height
        @if $suffix == 'width' {
          // Test fixed width cutoff (max-width)
          @if $fixed-width and mq-width-check($prefix, $mq-width, $fixed-width, 'max') {
            $pass-test: true;
          }
          // Test both min and max-width cutoffs
          @if $mq-min-cutoff and $mq-max-cutoff {
            @if mq-width-check($prefix, $mq-width, $mq-min-cutoff, 'min') and mq-width-check($prefix, $mq-width, $mq-max-cutoff, 'max') {
              $pass-test: true;
            }
          }
          // Test min-width cutoff
          @else if $mq-min-cutoff and mq-width-check($prefix, $mq-width, $mq-min-cutoff, 'min') {
            $pass-test: true;
          }
          // Test max-width cutoff
          @else if $mq-max-cutoff and mq-width-check($prefix, $mq-width, $mq-max-cutoff, 'max') {
            $pass-test: true;
          }
        }
        @else {
          $pass-test: true;
        }
      }

      // If passed test, output the styles
      @if $pass-test {
        // Do not output media queries for fixed width stylehseets
        @if $fixed-width {
          @content;
        }
        // Output the media query
        @else {
          @media screen #{$mq-conditions} {
            @content;
          }
        }
      }
    }
    // No cutoff vars set, so output the media query
    @else {
      @media screen #{$mq-conditions} {
        @content;
      }
    }
  }

  //------------------------------------------------------------------------//
  // String Argument(s)
  //
  // mq( width, [min/max] )
  //------------------------------------------------------------------------//
  @else {
    $mq-width: $breakpoints;
    $prefix: 'min';// Default

    // If second argument was passed, use as prefix
    @if length( $breakpoints ) >= 2 {
      $mq-width: nth( $breakpoints, 1 );
      $prefix: nth( $breakpoints, 2 );
    }
    // If more than 2 args passed, output a warning
    @else if length( $breakpoints ) > 2 {
      @warn "Too many arguments passed: mq(#{$breakpoints})";
    }

    // Generate the media query

    // Change unitles values to px
    @if unitless( $mq-width ) {
      $mq-width: $mq-width * 1px;
    }

    // Check for cutoff vars, run tests if present
    @if $hasCutoff {
      $pass-test: false;

      // Test fixed width cutoff (max-width)
      @if $fixed-width and mq-width-check($prefix, $mq-width, $fixed-width, 'max') {
        $pass-test: true;
      }
      // Test both min and max-width cutoffs
      @if $mq-min-cutoff and $mq-max-cutoff {
        @if mq-width-check($prefix, $mq-width, $mq-min-cutoff, 'min') and mq-width-check($prefix, $mq-width, $mq-max-cutoff, 'max') {
          $pass-test: true;
        }
      }
      // Test min-width cutoff
      @else if $mq-min-cutoff and mq-width-check($prefix, $mq-width, $mq-min-cutoff, 'min') {
          $pass-test: true;
      }
      // Test max-width cutoff
      @else if $mq-max-cutoff and mq-width-check($prefix, $mq-width, $mq-max-cutoff, 'max') {
          $pass-test: true;
      }

      // If passed test, output the styles
      @if $pass-test {
        // Do not output media queries for fixed width stylehseets
        @if $fixed-width {
          @content;
        }
        // Output the media query
        @else {
          @media screen and (#{$prefix}-width: $mq-width) {
            @content;
          }
        }
      }
    }
    // No cutoff vars set, so output the media query
    @else {
      @media screen and (#{$prefix}-width: $mq-width) {
        @content;
      }
    }
  }
}

//************************************************************************//
// Tests
//************************************************************************//
$mq-min-cutoff: 201px;
// $mq-max-cutoff: 200px;

/*
  Modern Browser Tests
  ---------------------
  $mq-min-cutoff: #{$mq-min-cutoff}
  $mq-max-cutoff: #{$mq-max-cutoff}
*/

.foo {
  // Defaults to min-width
  @include mq( 100px ) {
    content: '100px';
  }
  
  @include mq( 200px ) {
    content: '200px';
  }

  @include mq( 15em ) {
    content: '15em (240px)';
  }
  
  @include mq( 15rem ) {
    content: '15rem (240px)';
  }
  
  // Unitless values will be treated as pixels
  @include mq( 400 ) {
    content: '400';
  }
  
  // max-width
  @include mq( 500px, max ) {
    content: '500px, max';
  }
  
  // Mutiple conditions can be passed a Sass map
  @include mq( (min-width: 200px, max-width: 300px) ) {
    content: '(min-width: 200px, max-width: 300px)';
  }
  
  // Height queries must be passed as a map
  @include mq( (min-height: 400px) ) {
    content: '(min-height: 400px)';
  }
  
  @include mq( (min-width: 200px, max-width: 500px, min-height: 400px) ) {
    content: '(min-width: 200px, max-width: 500px, min-height: 400px)';
  }
}

//************************************************************************//
// Fixed Width Tests
//************************************************************************//
$fixed-width: 300px;

/*
  Old Browser Tests
  -------------------
  $fixed-width: #{$fixed-width}
*/
.foo {
  @include mq( 200px ) {
    content: '200px';
  }
  
  @include mq( 15em ) {
    content: '15em (240px)';
  }
  
  @include mq( 15rem ) {
    content: '15rem (240px)';
  }
  
  @include mq( 400 ) {
    content: '400';
  }
  
  @include mq( 500px, max ) {
    content: '500px, max';
  }
  
  @include mq( (min-width: 200px, max-width: 300px) ) {
    content: '(min-width: 200px, max-width: 300px)';
  }
  
  @include mq( (min-height: 400px) ) {
    content: '(min-height: 400px)';
  }
  
  @include mq( (min-width: 200px, max-width: 500px, min-height: 400px) ) {
    content: '(min-width: 200px, max-width: 500px, min-height: 400px)';
  }
}

SassMeister-output.css

/*
  Modern Browser Tests
  ---------------------
  $mq-min-cutoff: 201px
  $mq-max-cutoff: false
*/
@media screen and (min-width: 15em) {
  .foo {
    content: '15em (240px)';
  }
}
@media screen and (min-width: 15rem) {
  .foo {
    content: '15rem (240px)';
  }
}
@media screen and (min-width: 400px) {
  .foo {
    content: '400';
  }
}
@media screen and (max-width: 500px) {
  .foo {
    content: '500px, max';
  }
}
@media screen and (min-width: 200px) and (max-width: 300px) {
  .foo {
    content: '(min-width: 200px, max-width: 300px)';
  }
}
@media screen and (min-height: 400px) {
  .foo {
    content: '(min-height: 400px)';
  }
}
@media screen and (min-width: 200px) and (max-width: 500px) and (min-height: 400px) {
  .foo {
    content: '(min-width: 200px, max-width: 500px, min-height: 400px)';
  }
}

/*
  Old Browser Tests
  -------------------
  $fixed-width: 300px
*/
.foo {
  content: '200px';
  content: '15em (240px)';
  content: '15rem (240px)';
  content: '400';
  content: '500px, max';
  content: '(min-width: 200px, max-width: 300px)';
  content: '(min-height: 400px)';
  content: '(min-width: 200px, max-width: 500px, min-height: 400px)';
}