SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

//************************************************************************//
// 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: General Purpose Media Query Mixin
//
// 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/
//************************************************************************//

// Set a fallback fixed with for IE style sheets, must be px value or 'false'
// !default flag means this will only be used if it wasn't already set elsewhere
$fixed-width: false !default;

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

  // Compare width to fixed-width
  @if $type == 'min' and $fixed-width >= $width {
    @return true;
  }
  @else if $type == 'max' and $fixed-width < $width {
    @return true;
  }
  @else {
    @return false;
  }
}

// Generate Media Query
@mixin mq( $breakpoints... ) {

  // Check how many arguments were passed
  @if length( $breakpoints ) == 1 {
    // Update $breakpoints var be the first item in the arglist
    $breakpoints: nth( $breakpoints, 1 );
  }

  // Generate media query using Sass map
  @if type-of( $breakpoints ) == 'map' {

    // Determine whether to output the styles for $fixed-width stylesheets
    @if $fixed-width {
      $pass-test: true;

      // Loop through each media-query condition
      @each $type, $value in $breakpoints {
        $split-index: str-index( $type, '-' );
        $prefix: str-slice( $type, 1, $split-index - 1 );
        $suffix: str-slice( $type, $split-index + 1, -1 );
        // Check if width fails test
        @if $suffix == 'width' and not( mq-width-check( $prefix, $value ) ) {
          $pass-test: false;
        }
      }
      // Output styles if passes width test
      @if $pass-test {
        @content;
      }
    }
    // Generate media query
    @else {
       $mq-conditions: '';

      // Loop through each media-query condition
      @each $condition in $breakpoints {
        $mq-conditions: str-insert( $mq-conditions, 'and ( #{$condition} )', -1);
      }

      @media screen #{$mq-conditions} {
        @content;
      }
    }
  }

  // Generate min-width media query mq( width, type[optional] )
  @else {
    $min-width: $breakpoints;
    $prefix: 'min';

    // Check if second argument was passed, use as prefix
    @if length( $breakpoints ) >= 2 {
      $min-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 to mq(): #{$breakpoints}";
    }

    // If breakpoint is 0, don't generate media query
    @if strip( $min-width ) == 0 {
      @content;
    }
    // Generate the media query
    @else {
      // Determine whether to output the styles for $fixed-width stylesheets
      @if $fixed-width {
        @if mq-width-check( $prefix, $min-width ) {
          @content;
        }
      }
      // Not fixed width
      @else {
        // Change unitles values to px
        @if unitless( $min-width ) {
          $min-width: $min-width * 1px;
        }
        // Write media query
        @media screen and ( #{$prefix}-width: $min-width ) {
          @content;
        }
      }
    }
  }
}

//************************************************************************//
// Example
//************************************************************************//
/* Normal media query output for modern browsers */
.foo {
  @include mq( 200px ) {
    font-family: '200px';
  }
  
  @include mq( 300 ) {
    font-family: '300';
  }

  @include mq( 25em ) {
    font-family: '25em';
  }
  
  @include mq( 25rem ) {
    font-family: '25rem';
  }
  
  @include mq( 500px, max ) {
    font-family: '500px, max';
  }
  
  @include mq( (min-width: 200px, max-width: 500px, min-height: 400px) ) {
    font-family: '(min-width: 200px, max-width: 500px, min-height: 400px)';
  }
}

//************************************************************************//
// Fixed Width Example
//************************************************************************//
$fixed-width: 400px;

/* Same as above, but with $fixed-width set to #{$fixed-width} */
.foo {
  @include mq( 200px ) {
    font-family: '200px';
  }
  
  @include mq( 300 ) {
    font-family: '300';
  }

  @include mq( 25em ) {
    font-family: '25em';
  }
  
  @include mq( 25rem ) {
    font-family: '25rem';
  }
  
  @include mq( 500px, max ) {
    font-family: '500px, max';
  }
  
  @include mq( (min-width: 200px, max-width: 500px, min-height: 400px) ) {
    font-family: '(min-width: 200px, max-width: 500px, min-height: 400px)';
  }
}

SassMeister-output.css

/* Normal media query output for modern browsers */
@media screen and (min-width: 200px) {
  .foo {
    font-family: '200px';
  }
}
@media screen and (min-width: 300px) {
  .foo {
    font-family: '300';
  }
}
@media screen and (min-width: 25em) {
  .foo {
    font-family: '25em';
  }
}
@media screen and (min-width: 25rem) {
  .foo {
    font-family: '25rem';
  }
}
@media screen and (max-width: 500px) {
  .foo {
    font-family: '500px, max';
  }
}
@media screen and (min-width 200px) and (max-width 500px) and (min-height 400px) {
  .foo {
    font-family: '(min-width: 200px, max-width: 500px, min-height: 400px)';
  }
}

/* Same as above, but with $fixed-width set to 400px */
.foo {
  font-family: '200px';
  font-family: '300';
  font-family: '25em';
  font-family: '25rem';
  font-family: '500px, max';
  font-family: '(min-width: 200px, max-width: 500px, min-height: 400px)';
}