Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<section class="band" data-layout="6 6">
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Breakpoint (v2.6.1)
// Susy (v2.2.7)
// ----

@import "susy";
@import "breakpoint";

// Spacing Variables
$box-padding: 30px;
$vertical-gutter: 30px;
$band-padding: 60px;

// Function to strip the unit off of an attr
@function strip-unit($num) {
    @return $num / ($num * 0 + 1);
}

// Wraps susy span in breakpoint
@mixin bp-span($grid, $breakpoint) {
    @include breakpoint($breakpoint) {
        @include span($grid);
    }
}

// Breakpoint variables
$screen-zero: 0;
$screen-xs-min: 480px;
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

$screen-xxs-max: $screen-xs-min - 1;
$screen-xs-max: $screen-sm-min - 1;
$screen-sm-max: $screen-md-min - 1;
$screen-md-max: $screen-lg-min - 1;

// Quickly apply Flexbox options
// It works in conjunction with modernizr to make sure the broswer supports flexbox layouts and offers fallbacks
@mixin flex( $flow: null, $align: null, $justify: null ) {
    // IE9 graceful fallbacks
    .no-flexbox & {
        display: inline-block;
    }
    display: flex;
    @if type-of($flow) != null {
        $flow: ($flow );

        // Validate the direction value
        $direction: nth($flow, 1);
        $valid-direction: row row-reverse column column-reverse;
        @if contains($valid-direction, $direction) {
            flex-direction: $direction;
        }

        // IE9 graceful fallbacks
        .no-flexbox & > * {
            @if $direction == row-reverse {
                float: right;
            }
            @else {
                float: left;
            }
        }

        @if length($flow) > 1 {
            $wrap: nth($flow, 2);
            $valid-wrap: wrap nowrap wrap-reverse;
            @if contains($valid-wrap, $wrap) {
                flex-wrap: $wrap;
            }
        }
    }
    @if type-of($align) != null {
        @if $align == both {
            align-items: center;
            justify-content: center;
        }
        @else {
            $valid-align: flex-start, flex-end, center, baseline, stretch;
            @if contains($valid-align, $align) {
                align-items: $align;
            }
        }
        // IE9 graceful fallbacks
        .no-flexbox & > * {
            @if $align == center {
                margin-right: auto;
                margin-left: auto;
            }
        }
    }
    @if typeo-of($justify) != null {
        $valid-justify: flex-start, flex-end, center, space-between, space-around;
        @if contains($valid-justify, $justify) {
            justify-content: $justify;
        }
    }
}


// Build a custom layout by first defining a $list [map](https://www.viget.com/articles/sass-maps-are-awesome) of breakpoints and layouts based on a 12 column grid (unless overriden in the $base variable).
// Use a mobile-first approach, meaning begin with 0px screen width, define a layout for "mobile" and move upwards from there. Standard breakpoint variables are preferred, but custom breakpoints are allowed.

@mixin layout(
    $layout: ( 0: 12 ),
    $base: 12,
    $sub: false,
    $break: true,
    $flex: true,
    $flex-flow: row wrap,
    $flex-align: null,
    $flex-justify: space-between ) {

    // If full-width layout, remove top-padding from layout
    margin-top: if($sub == false, -$vertical-gutter, 0);

    $breakpoints: map-keys( $layout );
    > * {
        // If the first breakpoint doesn't start with 0,
        //  build default stacked grid
        @if strip-unit(nth($breakpoints, 1)) != 0 {
            @include span($base of $base);
        }
        margin-top: $vertical-gutter;
    }

    // Iterate over layout list, get columns and breakpoints
    $last-bp: 0;
    $layout-count: 1;
    @each $bp, $columns in $layout {
        // Check the list is ordered from smallest breakpoint to largest; mobile-first
        @if ( $last-bp > strip-unit($bp)) {
            @error "Layout list should be ordered from smallest to largest breakpoint.";
        }
        //-- BUILD GRID
        // Get number of child elements
        $num-columns: length($columns);
        $next-idx: $layout-count + 1;
        $next-bp: if( length($breakpoints) > 1 and length($breakpoints) > $layout-count,
            nth($breakpoints, $next-idx) - 1, null );
        // Set layout for each column size
        @for $i from 1 through $num-columns {
            // Get column dimension from list
            $col: nth($columns, $i);
            // Set breakpoint limits
            $bps: if($next-bp != null, $bp $next-bp, $bp);
            // Add last string if last column in layout
            $span-last: if($i == $num-columns, "last", "");
            // Add break/nobreak setting
            $span-break: if($break == false, "nobreak", "break");
            // Set layout for nth-child element
            > *:nth-child(#{$num-columns}n+#{$i}) {
                // If column width is 0, add display: none to layout
                @if $col == 0 {
                    @include breakpoint( $bps ) {
                        display: none;
                    }
                }
                @else {
                  @include breakpoint( $bps ) {
                    flex-basis: span($col of $base $span-last $span-break);
                    .no-flexbox & {
                      @include bp-span($col of $base $span-last $span-break, $bp);
                    }
                  }
                }
            }
            // If this is the last column at this breakpoint (to ensure this only prints once)
            @if $num-columns == $i and $flex == true {
                @include breakpoint( $bps ) {
                    //-- FLEX: Apply display rules to parent
                    // If layout is stacked, change to column flow
                    $flow-new: if($col == $base, column nth($flex-flow, 2), $flex-flow);
                    // Create flex layout on parent
                    @include flex(
                        $flow: $flow-new,
                        $align: $flex-align,
                        $justify: $flex-justify
                    );
                }
            }
        }
        // Set last breakpoint var to current breakpoint before iterating
        $last-bp: strip-unit($bp);
        $layout-count: $layout-count + 1;
    }
}

[data-layout="6 6"] {
  $list: (
    $screen-sm-min: 6 6,
    $screen-md-min: 4 4 4,
    $screen-lg-min: 3 3 3 3
  );
  @include layout(
    $layout: $list
  );
}

.image-embed {
  &-img[data-size="full"] {
    width: 100%;
    height: auto;
  }
}

SassMeister-output.css

[data-layout="6 6"] {
  margin-top: -30px;
}
[data-layout="6 6"] > * {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-top: 30px;
}
@media (min-width: 768px) and (max-width: 991px) {
  [data-layout="6 6"] > *:nth-child(2n+1) {
    -webkit-flex-basis: 49.15254%;
        -ms-flex-preferred-size: 49.15254%;
            flex-basis: 49.15254%;
  }
}
@media (min-width: 768px) and (max-width: 991px) and (min-width: 768px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(2n+1) {
    clear: both;
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  [data-layout="6 6"] > *:nth-child(2n+2) {
    -webkit-flex-basis: 49.15254%;
        -ms-flex-preferred-size: 49.15254%;
            flex-basis: 49.15254%;
  }
}
@media (min-width: 768px) and (max-width: 991px) and (min-width: 768px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(2n+2) {
    clear: both;
    width: 49.15254%;
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  [data-layout="6 6"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .no-flexbox [data-layout="6 6"] {
    display: inline-block;
  }
  .no-flexbox [data-layout="6 6"] > * {
    float: left;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  [data-layout="6 6"] > *:nth-child(3n+1) {
    -webkit-flex-basis: 32.20339%;
        -ms-flex-preferred-size: 32.20339%;
            flex-basis: 32.20339%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) and (min-width: 992px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(3n+1) {
    clear: both;
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [data-layout="6 6"] > *:nth-child(3n+2) {
    -webkit-flex-basis: 32.20339%;
        -ms-flex-preferred-size: 32.20339%;
            flex-basis: 32.20339%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) and (min-width: 992px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(3n+2) {
    clear: both;
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [data-layout="6 6"] > *:nth-child(3n+3) {
    -webkit-flex-basis: 32.20339%;
        -ms-flex-preferred-size: 32.20339%;
            flex-basis: 32.20339%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) and (min-width: 992px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(3n+3) {
    clear: both;
    width: 32.20339%;
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  [data-layout="6 6"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .no-flexbox [data-layout="6 6"] {
    display: inline-block;
  }
  .no-flexbox [data-layout="6 6"] > * {
    float: left;
  }
}
@media (min-width: 1200px) {
  [data-layout="6 6"] > *:nth-child(4n+1) {
    -webkit-flex-basis: 23.72881%;
        -ms-flex-preferred-size: 23.72881%;
            flex-basis: 23.72881%;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(4n+1) {
    clear: both;
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%;
  }
}

@media (min-width: 1200px) {
  [data-layout="6 6"] > *:nth-child(4n+2) {
    -webkit-flex-basis: 23.72881%;
        -ms-flex-preferred-size: 23.72881%;
            flex-basis: 23.72881%;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(4n+2) {
    clear: both;
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%;
  }
}

@media (min-width: 1200px) {
  [data-layout="6 6"] > *:nth-child(4n+3) {
    -webkit-flex-basis: 23.72881%;
        -ms-flex-preferred-size: 23.72881%;
            flex-basis: 23.72881%;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(4n+3) {
    clear: both;
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%;
  }
}

@media (min-width: 1200px) {
  [data-layout="6 6"] > *:nth-child(4n+4) {
    -webkit-flex-basis: 23.72881%;
        -ms-flex-preferred-size: 23.72881%;
            flex-basis: 23.72881%;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .no-flexbox [data-layout="6 6"] > *:nth-child(4n+4) {
    clear: both;
    width: 23.72881%;
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 1200px) {
  [data-layout="6 6"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .no-flexbox [data-layout="6 6"] {
    display: inline-block;
  }
  .no-flexbox [data-layout="6 6"] > * {
    float: left;
  }
}

.image-embed-img[data-size="full"] {
  width: 100%;
  height: auto;
}

SassMeister-rendered.html

<section class="band" data-layout="6 6">
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
  <div class="image-embed">
    <img class="image-embed-img" src="http://placekitten.com/300/300" data-size="full">
  </div>
</section>