Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$bp0: 0;
$bp1: 430px;
$bp2: 600px;
$bp3: 768px;
$bp4: 906px;
$bp5: 1024px;

$fix-mqs: false !default;

// single breakpoint query
@mixin mq($width) {
	@if $fix-mqs {
		@if $fix-mqs <= $width {
			@content;
		}
	} @else {
		@media screen and (min-width: $width) and (max-width: next-bp($width)) {
			@content;
		}
	}
}

// calculate next breakpoint
@function next-bp($width) {
	@if $width == $bp1 {
		@return $bp2 - 1;
	} @else {
		@warn 'Invalid breakpoint';
		@return $bp2 - 1;
	}
}

$sixpacks: (
  1 (
    $bp4 3 ( (2, 4), (1, 2), (1, 2) ),
    $bp3 2 ( (2, 3), (1, 3), (1, 3) ),
    $bp2 3 ( (2, 4), (1, 2), (1, 2) ),
    $bp1 2 ( (2, 3), (1, 3), (1, 3) )
  ),
  2 (
    $bp4 3 ( (2, 4), (1, 2), (1, 2) ),
    $bp3 2 ( (2, 3), (1, 3), (1, 3) ),
    $bp2 3 ( (2, 4), (1, 2), (1, 2) ),
    $bp1 2 ( (2, 3), (1, 3), (1, 3) )
  ),
  3 (
    $bp4 3 ( (2, 4), (1, 2), (1, 2) ),
    $bp3 2 ( (2, 3), (1, 3), (1, 3) ),
    $bp2 3 ( (2, 4), (1, 2), (1, 2) ),
    $bp1 2 ( (2, 3), (1, 3), (1, 3) )
  )
);

@each $sixpack in $sixpacks {
  $pack: nth($sixpack, 1);
  $rows: nth($sixpack, 2);
  
  .sixpack--#{$pack} {
    @each $row in $rows {
      $bp: nth($row, 1);
      $sizes: nth($row, 3);
      $cols: nth($row, 2);
      
      @include mq($bp) {
        @for $i from 1 through length($sizes) {
          $width: nth(nth($sizes, $i), 1);
          $height: nth(nth($sizes, $i), 2);
          .tile--#{$i} {
            width: (100% / $cols) * $width;
            height: nth(nth($sizes, $i), 2);
          }
        }
      }
    }
  }
}

SassMeister-output.css

@media screen and (min-width: 906px) and (max-width: 599px) {
  .sixpack--1 .tile--1 {
    width: 66.66666667%;
    height: 4;
  }
  .sixpack--1 .tile--2 {
    width: 33.33333333%;
    height: 2;
  }
  .sixpack--1 .tile--3 {
    width: 33.33333333%;
    height: 2;
  }
}
@media screen and (min-width: 768px) and (max-width: 599px) {
  .sixpack--1 .tile--1 {
    width: 100%;
    height: 3;
  }
  .sixpack--1 .tile--2 {
    width: 50%;
    height: 3;
  }
  .sixpack--1 .tile--3 {
    width: 50%;
    height: 3;
  }
}
@media screen and (min-width: 600px) and (max-width: 599px) {
  .sixpack--1 .tile--1 {
    width: 66.66666667%;
    height: 4;
  }
  .sixpack--1 .tile--2 {
    width: 33.33333333%;
    height: 2;
  }
  .sixpack--1 .tile--3 {
    width: 33.33333333%;
    height: 2;
  }
}
@media screen and (min-width: 430px) and (max-width: 599px) {
  .sixpack--1 .tile--1 {
    width: 100%;
    height: 3;
  }
  .sixpack--1 .tile--2 {
    width: 50%;
    height: 3;
  }
  .sixpack--1 .tile--3 {
    width: 50%;
    height: 3;
  }
}

@media screen and (min-width: 906px) and (max-width: 599px) {
  .sixpack--2 .tile--1 {
    width: 66.66666667%;
    height: 4;
  }
  .sixpack--2 .tile--2 {
    width: 33.33333333%;
    height: 2;
  }
  .sixpack--2 .tile--3 {
    width: 33.33333333%;
    height: 2;
  }
}
@media screen and (min-width: 768px) and (max-width: 599px) {
  .sixpack--2 .tile--1 {
    width: 100%;
    height: 3;
  }
  .sixpack--2 .tile--2 {
    width: 50%;
    height: 3;
  }
  .sixpack--2 .tile--3 {
    width: 50%;
    height: 3;
  }
}
@media screen and (min-width: 600px) and (max-width: 599px) {
  .sixpack--2 .tile--1 {
    width: 66.66666667%;
    height: 4;
  }
  .sixpack--2 .tile--2 {
    width: 33.33333333%;
    height: 2;
  }
  .sixpack--2 .tile--3 {
    width: 33.33333333%;
    height: 2;
  }
}
@media screen and (min-width: 430px) and (max-width: 599px) {
  .sixpack--2 .tile--1 {
    width: 100%;
    height: 3;
  }
  .sixpack--2 .tile--2 {
    width: 50%;
    height: 3;
  }
  .sixpack--2 .tile--3 {
    width: 50%;
    height: 3;
  }
}

@media screen and (min-width: 906px) and (max-width: 599px) {
  .sixpack--3 .tile--1 {
    width: 66.66666667%;
    height: 4;
  }
  .sixpack--3 .tile--2 {
    width: 33.33333333%;
    height: 2;
  }
  .sixpack--3 .tile--3 {
    width: 33.33333333%;
    height: 2;
  }
}
@media screen and (min-width: 768px) and (max-width: 599px) {
  .sixpack--3 .tile--1 {
    width: 100%;
    height: 3;
  }
  .sixpack--3 .tile--2 {
    width: 50%;
    height: 3;
  }
  .sixpack--3 .tile--3 {
    width: 50%;
    height: 3;
  }
}
@media screen and (min-width: 600px) and (max-width: 599px) {
  .sixpack--3 .tile--1 {
    width: 66.66666667%;
    height: 4;
  }
  .sixpack--3 .tile--2 {
    width: 33.33333333%;
    height: 2;
  }
  .sixpack--3 .tile--3 {
    width: 33.33333333%;
    height: 2;
  }
}
@media screen and (min-width: 430px) and (max-width: 599px) {
  .sixpack--3 .tile--1 {
    width: 100%;
    height: 3;
  }
  .sixpack--3 .tile--2 {
    width: 50%;
    height: 3;
  }
  .sixpack--3 .tile--3 {
    width: 50%;
    height: 3;
  }
}