Sass Media Queries Structure - Zurb Founation Base

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

//
// Article Info(Fun Part):
//
@mixin person($who) {
  #{$who}-name: "Parhum Khoshbakht";
  #{$who}-url: "http://parhum.net";
  #{$who}-twitter: "@parhumm";
}
%article__info {
  article-title: "Sass Media Queries Structure";
  article-url: "http://parhum.net/blog/rwd/sass-media-queries-structure/";
  
  @include person(author);
}
 
 
 
 //
// Functions
//
 
// RANGES
// We use these functions to define ranges for various things, like media queries. 
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}
 
@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}
 
//
// Settings
//
 
// Media Query Ranges
 $small-range: (0em, 40em);
 $medium-range: (40.063em, 64em);
 $large-range: (64.063em, 90em);
 $xlarge-range: (90.063em, 120em);
 $xxlarge-range: (120.063em, 99999999em);
 
 // Media Query Expressions
 $screen: "only screen";
 
 $landscape: "#{$screen} and (orientation: landscape)";
 $portrait: "#{$screen} and (orientation: portrait)";
 
 $small-up: $screen;
 $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
 
 $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
 $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
 
 $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
 $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
 
 $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
 $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
 
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
 
 
//
// Mixin
//
 
@mixin breakpoint($point) {
  @if $point == small {
      @media #{$small-only} { @content; }
  }
  @else if $point == small-up {
      @media #{$small-up} { @content; }
  }
  @else if $point == medium {
      @media #{$medium-only} { @content; }
  }
  @else if $point == medium-up {
      @media #{$medium-up} { @content; }
  }
  @else if $point == large {
      @media #{$large-only} { @content; }
  }
  @else if $point == large-up {
      @media #{$large-up} { @content; }
  }
  @else if $point == xlarge {
      @media #{$xlarge-only} { @content; }
  }
  @else if $point == xlarge-up {
      @media #{$xlarge-up} { @content; }
  }
  @else if $point == xxlarge {
      @media #{$xxlarge-only} { @content; }
  }
  @else if $point == xxlarge-up {
      @media #{$xxlarge-up} { @content; }
  }
  @else {
      @warn "This breakpoint '#{$point}' doesn't exist!";
  }
}
 
 
//
// Styles
//
 
#nav {
  background: #eee;
  @include breakpoint(small) {
      li {
          display: block;
          margin-right: 0;
      }
  }
  @include breakpoint(medium-up) {
      ul {
          float: left;
          width: 80%;
      }
      li {
          display: inline-block;
          margin-right: 1rem;
      }
  }
}

SassMeister-output.css

#nav {
  background: #eee;
}
@media only screen and (max-width: 40em) {
  #nav li {
    display: block;
    margin-right: 0;
  }
}
@media only screen and (min-width: 40.063em) {
  #nav ul {
    float: left;
    width: 80%;
  }
  #nav li {
    display: inline-block;
    margin-right: 1rem;
  }
}