Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>Im red</div>

SassMeister-input.scss

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

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

@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);
}

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

$grid-gap: 24px !default; 

// 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(map-get($breakpoints, small))})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, medium))})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, medium))}) and (max-width:#{upper-bound(map-get($breakpoints, medium))})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, large))})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, large))}) and (max-width:#{upper-bound(map-get($breakpoints, large))})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, xlarge))})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, xlarge))}) and (max-width:#{upper-bound(map-get($breakpoints, xlarge))})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, xxlarge))})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound(map-get($breakpoints, xxlarge))}) and (max-width:#{upper-bound(map-get($breakpoints, xxlarge))})" !default;



@mixin create-grids($cols: 12, $bps: $breakpoints) {
    @each $bp-name, $bp-range in $bps {
        $bp-value: lower-bound($bp-range);

        // this checks to see if the first in map
        @if $bp-name == nth(map-keys($breakpoints),1) {
            @for $i from 1 through $cols {
                .#{$bp-name}-#{$i} {
                    width: (100% / $cols) * $i;
                }
            }     
        } @else {
            @media all and (min-width: $bp-value) {
                @for $i from 1 through $cols {
                    .#{$bp-name}-#{$i} {
                        width: (100% / $cols) * $i;
                    }
                }
            }     
        }
    }
}




div {
    color: blue;
    
    @media #{$medium-only} {
        color: red;
    } 
}

.grid {
    list-style: none;
    margin: 0;
    margin-left: -$grid-gap;
    padding: 0 $grid-gap;
}  

.grid__item {
    display: inline-block;
    margin-bottom: $grid-gap;
    padding-left: $grid-gap;
    width: 100%;
}

@include create-grids(); 

SassMeister-output.css

div {
  color: blue;
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  div {
    color: red;
  }
}

.grid {
  list-style: none;
  margin: 0;
  margin-left: -24px;
  padding: 0 24px;
}

.grid__item {
  display: inline-block;
  margin-bottom: 24px;
  padding-left: 24px;
  width: 100%;
}

.small-1 {
  width: 8.33333%;
}

.small-2 {
  width: 16.66667%;
}

.small-3 {
  width: 25%;
}

.small-4 {
  width: 33.33333%;
}

.small-5 {
  width: 41.66667%;
}

.small-6 {
  width: 50%;
}

.small-7 {
  width: 58.33333%;
}

.small-8 {
  width: 66.66667%;
}

.small-9 {
  width: 75%;
}

.small-10 {
  width: 83.33333%;
}

.small-11 {
  width: 91.66667%;
}

.small-12 {
  width: 100%;
}

@media all and (min-width: 40.063em) {
  .medium-1 {
    width: 8.33333%;
  }

  .medium-2 {
    width: 16.66667%;
  }

  .medium-3 {
    width: 25%;
  }

  .medium-4 {
    width: 33.33333%;
  }

  .medium-5 {
    width: 41.66667%;
  }

  .medium-6 {
    width: 50%;
  }

  .medium-7 {
    width: 58.33333%;
  }

  .medium-8 {
    width: 66.66667%;
  }

  .medium-9 {
    width: 75%;
  }

  .medium-10 {
    width: 83.33333%;
  }

  .medium-11 {
    width: 91.66667%;
  }

  .medium-12 {
    width: 100%;
  }
}
@media all and (min-width: 64.063em) {
  .large-1 {
    width: 8.33333%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-3 {
    width: 25%;
  }

  .large-4 {
    width: 33.33333%;
  }

  .large-5 {
    width: 41.66667%;
  }

  .large-6 {
    width: 50%;
  }

  .large-7 {
    width: 58.33333%;
  }

  .large-8 {
    width: 66.66667%;
  }

  .large-9 {
    width: 75%;
  }

  .large-10 {
    width: 83.33333%;
  }

  .large-11 {
    width: 91.66667%;
  }

  .large-12 {
    width: 100%;
  }
}
@media all and (min-width: 90.063em) {
  .xlarge-1 {
    width: 8.33333%;
  }

  .xlarge-2 {
    width: 16.66667%;
  }

  .xlarge-3 {
    width: 25%;
  }

  .xlarge-4 {
    width: 33.33333%;
  }

  .xlarge-5 {
    width: 41.66667%;
  }

  .xlarge-6 {
    width: 50%;
  }

  .xlarge-7 {
    width: 58.33333%;
  }

  .xlarge-8 {
    width: 66.66667%;
  }

  .xlarge-9 {
    width: 75%;
  }

  .xlarge-10 {
    width: 83.33333%;
  }

  .xlarge-11 {
    width: 91.66667%;
  }

  .xlarge-12 {
    width: 100%;
  }
}
@media all and (min-width: 120.063em) {
  .xxlarge-1 {
    width: 8.33333%;
  }

  .xxlarge-2 {
    width: 16.66667%;
  }

  .xxlarge-3 {
    width: 25%;
  }

  .xxlarge-4 {
    width: 33.33333%;
  }

  .xxlarge-5 {
    width: 41.66667%;
  }

  .xxlarge-6 {
    width: 50%;
  }

  .xxlarge-7 {
    width: 58.33333%;
  }

  .xxlarge-8 {
    width: 66.66667%;
  }

  .xxlarge-9 {
    width: 75%;
  }

  .xxlarge-10 {
    width: 83.33333%;
  }

  .xxlarge-11 {
    width: 91.66667%;
  }

  .xxlarge-12 {
    width: 100%;
  }
}

SassMeister-rendered.html

<div>Im red</div>