Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$grid: (
  columns: 12,
);

// --------------------------------------------------------
// Mixins

@mixin grid-span($target, $context: map-get($grid, columns)) {
  float: left;
  width: percentage($target / $context);
}

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function pem($pixels, $base: 16) {
  @return strip-unit($pixels)/strip-unit($base) * 1em;
}


$bp: (
  extraSmall: 500,
  small: 800,
  medium: 1000,
  large: 1300,
  extraLarge: 1800,
);

$bp--screen: "only screen";
$bp--landscape: "#{$bp--screen} and (orientation: landscape)";
$bp--portrait: "#{$bp--screen} and (orientation: portrait)";

$bp: (
  extraSmall: 500,
  small: 800,
  medium: 1000,
  large: 1300,
  extraLarge: 1800,
);

$bp--lowerBound: (
  extraSmall: pem(0, 16),
  small: pem(map-get($bp, extraSmall) + 1, 16),
  medium: pem(map-get($bp, small) + 1, 16),
  large: pem(map-get($bp, medium) + 1, 16),
  extraLarge: pem(map-get($bp, large) + 1, 16),
  jumbo: pem(map-get($bp, extraLarge) + 1, 16),
);

$bp--upperBound: (
  extraSmall: pem(map-get($bp, extraSmall), 16),
  small: pem(map-get($bp, small), 16),
  medium: pem(map-get($bp, medium), 16),
  large: pem(map-get($bp, large), 16),
  extraLarge: pem(map-get($bp, extraLarge), 16),
);

$bp--up: (
  small: "(min-width: #{map-get($bp--lowerBound, small)})",
  medium: "(min-width: #{map-get($bp--lowerBound, medium)})",
  large: "(min-width: #{map-get($bp--lowerBound, large)})",
  extraLarge: "(min-width: #{map-get($bp--lowerBound, extraLarge)})",
);

$bp--down: (
  small: "(max-width: #{map-get($bp--upperBound, small)})",
  medium: "(max-width: #{map-get($bp--upperBound, medium)})",
  large: "(max-width: #{map-get($bp--upperBound, large)})",
  extraLarge: "(max-width: #{map-get($bp--upperBound, extraLarge)})",
);

$bp--only: (
  extraSmall: "(max-width: #{map-get($bp--upperBound, extraSmall)})",
  small: "(min-width: #{map-get($bp--lowerBound, small)}) and (max-width: #{map-get($bp--upperBound, small)})",
  medium: "(min-width: #{map-get($bp--lowerBound, medium)}) and (max-width: #{map-get($bp--upperBound, medium)})",
  large: "(min-width: #{map-get($bp--lowerBound, large)}) and (max-width: #{map-get($bp--upperBound, large)})",
  extraLarge: "(min-width: #{map-get($bp--lowerBound, extraLarge)}) and (max-width: #{map-get($bp--upperBound, extraLarge)})",
  jumbo: "(min-width: #{map-get($bp--lowerBound, jumbo)})",
);

// --------------------------------------------------------
// Grid Builder

@each $breakpoint in map-keys($bp) {
  @media (max-width: #{map-get($bp--upperBound, $breakpoint)}) {
    @for $span from 1 through map-get($grid, columns) {
      .l--#{$breakpoint}--#{$span} {
        @include grid-span($span);
      }
    }
  }
}

SassMeister-output.css

@media (max-width: 31.25em) {
  .l--extraSmall--1 {
    float: left;
    width: 8.33333%;
  }
  .l--extraSmall--2 {
    float: left;
    width: 16.66667%;
  }
  .l--extraSmall--3 {
    float: left;
    width: 25%;
  }
  .l--extraSmall--4 {
    float: left;
    width: 33.33333%;
  }
  .l--extraSmall--5 {
    float: left;
    width: 41.66667%;
  }
  .l--extraSmall--6 {
    float: left;
    width: 50%;
  }
  .l--extraSmall--7 {
    float: left;
    width: 58.33333%;
  }
  .l--extraSmall--8 {
    float: left;
    width: 66.66667%;
  }
  .l--extraSmall--9 {
    float: left;
    width: 75%;
  }
  .l--extraSmall--10 {
    float: left;
    width: 83.33333%;
  }
  .l--extraSmall--11 {
    float: left;
    width: 91.66667%;
  }
  .l--extraSmall--12 {
    float: left;
    width: 100%;
  }
}

@media (max-width: 50em) {
  .l--small--1 {
    float: left;
    width: 8.33333%;
  }
  .l--small--2 {
    float: left;
    width: 16.66667%;
  }
  .l--small--3 {
    float: left;
    width: 25%;
  }
  .l--small--4 {
    float: left;
    width: 33.33333%;
  }
  .l--small--5 {
    float: left;
    width: 41.66667%;
  }
  .l--small--6 {
    float: left;
    width: 50%;
  }
  .l--small--7 {
    float: left;
    width: 58.33333%;
  }
  .l--small--8 {
    float: left;
    width: 66.66667%;
  }
  .l--small--9 {
    float: left;
    width: 75%;
  }
  .l--small--10 {
    float: left;
    width: 83.33333%;
  }
  .l--small--11 {
    float: left;
    width: 91.66667%;
  }
  .l--small--12 {
    float: left;
    width: 100%;
  }
}

@media (max-width: 62.5em) {
  .l--medium--1 {
    float: left;
    width: 8.33333%;
  }
  .l--medium--2 {
    float: left;
    width: 16.66667%;
  }
  .l--medium--3 {
    float: left;
    width: 25%;
  }
  .l--medium--4 {
    float: left;
    width: 33.33333%;
  }
  .l--medium--5 {
    float: left;
    width: 41.66667%;
  }
  .l--medium--6 {
    float: left;
    width: 50%;
  }
  .l--medium--7 {
    float: left;
    width: 58.33333%;
  }
  .l--medium--8 {
    float: left;
    width: 66.66667%;
  }
  .l--medium--9 {
    float: left;
    width: 75%;
  }
  .l--medium--10 {
    float: left;
    width: 83.33333%;
  }
  .l--medium--11 {
    float: left;
    width: 91.66667%;
  }
  .l--medium--12 {
    float: left;
    width: 100%;
  }
}

@media (max-width: 81.25em) {
  .l--large--1 {
    float: left;
    width: 8.33333%;
  }
  .l--large--2 {
    float: left;
    width: 16.66667%;
  }
  .l--large--3 {
    float: left;
    width: 25%;
  }
  .l--large--4 {
    float: left;
    width: 33.33333%;
  }
  .l--large--5 {
    float: left;
    width: 41.66667%;
  }
  .l--large--6 {
    float: left;
    width: 50%;
  }
  .l--large--7 {
    float: left;
    width: 58.33333%;
  }
  .l--large--8 {
    float: left;
    width: 66.66667%;
  }
  .l--large--9 {
    float: left;
    width: 75%;
  }
  .l--large--10 {
    float: left;
    width: 83.33333%;
  }
  .l--large--11 {
    float: left;
    width: 91.66667%;
  }
  .l--large--12 {
    float: left;
    width: 100%;
  }
}

@media (max-width: 112.5em) {
  .l--extraLarge--1 {
    float: left;
    width: 8.33333%;
  }
  .l--extraLarge--2 {
    float: left;
    width: 16.66667%;
  }
  .l--extraLarge--3 {
    float: left;
    width: 25%;
  }
  .l--extraLarge--4 {
    float: left;
    width: 33.33333%;
  }
  .l--extraLarge--5 {
    float: left;
    width: 41.66667%;
  }
  .l--extraLarge--6 {
    float: left;
    width: 50%;
  }
  .l--extraLarge--7 {
    float: left;
    width: 58.33333%;
  }
  .l--extraLarge--8 {
    float: left;
    width: 66.66667%;
  }
  .l--extraLarge--9 {
    float: left;
    width: 75%;
  }
  .l--extraLarge--10 {
    float: left;
    width: 83.33333%;
  }
  .l--extraLarge--11 {
    float: left;
    width: 91.66667%;
  }
  .l--extraLarge--12 {
    float: left;
    width: 100%;
  }
}