@mixin for-xs {
  @media (max-width: 576px) { @content; }
}
@mixin for-sm {
  @media (min-width: 576px) { @content; }
}
@mixin for-md {
  @media (min-width: 768px) { @content; }
}
@mixin for-lg {
  @media (min-width: 960px) { @content; }
}
@mixin for-xl {
  @media (min-width: 1140px) { @content; }
}

@function parseInt($n) {
  /* 2 */
  @return $n / ($n * 0 + 1);
}

@mixin unitize($property, $values) {
  $px: (); /* 3 */
  $rem: (); /* 3 */

  @each $value in $values {
    /* 4 */

    @if $value == 0 or $value == auto {
      /* 5 */
      $px: append($px, $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value); /* 6 */
      $val: parseInt($value); /* 6 */

      @if $unit == 'px' {
        /* 7 */
        $px: append($px, $value);
        $rem: append($rem, ($val / 16 + rem));
      }

      @if $unit == 'rem' {
        /* 7 */
        $px: append($px, ($val * 16 + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {
    /* 8 */
    #{$property}: $px; /* 9 */
  } @else {
    #{$property}: $px; /* 9 */
    #{$property}: $rem; /* 9 */
  }
}



// Defining values
$screen-sm-min: 768px;
$screen-xs-max: ($screen-sm-min - 1);
$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);
$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);


// Defining values
$small-range:   (0em, 40em);       /* 0, 640px */
$medium-range:  (40.063em, 64em);  /* 641px, 1024px */
$large-range:   (64.063em, 90em);  /* 1025px, 1440px */
$xlarge-range:  (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em);       /* 1921px */

// Defining media queries
$screen:       "only screen" !default;
$landscape:    "#{$screen} and (orientation: landscape)" !default;
$portrait:     "#{$screen} and (orientation: portrait)" !default;
$small-up:     $screen !default;
$small-only:   "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$medium-up:    "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only:  "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up:     "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only:   "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
$xlarge-up:    "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only:  "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
$xxlarge-up:   "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

// Usage
//@media #{$small-up}     { ... }
//@media #{$small-only}   { ... }
//@media #{$medium-up}    { ... }
//@media #{$medium-only}  { ... }
//@media #{$large-up}     { ... }
//@media #{$large-only}   { ... }
//@media #{$xlarge-up}    { ... }
//@media #{$xlarge-only}  { ... }
//@media #{$xxlarge-up}   { ... }
//@media #{$xxlarge-only} { ... }

// Usage
//@media (max-width: $screen-xs-max) { ... }
//@media (min-width: $screen-sm-min) { ... }
//@media (max-width: $screen-sm-max) { ... }
//@media (min-width: $screen-md-min) { ... }
//@media (max-width: $screen-md-max) { ... }
//@media (min-width: $screen-lg-min) { ... }