Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Row test</h1>
<!--[if (lte IE 9) & (!IEMobile)]>
<div class="old-ie">
<![endif]-->

    <!-- items: 2 -->
    <div class="l-row l-row--items-2">
        <div class="l-row__item l-row__item--boost-1">1+</div>
        <div class="l-row__item">2</div>
    </div>
    <div class="l-row l-row--items-2">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
    </div>
    <div class="l-row l-row--items-2">
        <div class="l-row__item">1</div>
        <div class="l-row__item l-row__item--boost-2">2++</div>
    </div>

    <!-- items: 3 -->
    <div class="l-row l-row--items-3">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
    </div>
    <div class="l-row l-row--items-3">
        <div class="l-row__item">1</div>
        <div class="l-row__item l-row__item--boost-1">2+</div>
        <div class="l-row__item">3</div>
    </div>
    <div class="l-row l-row--items-3">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item l-row__item--boost-2">3++</div>
    </div>

    <!-- items: 4 -->
    <div class="l-row l-row--items-4">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>

    <hr />
    <h2>Mobile layouts</h2>
    <div class="l-row l-row--items-2 l-row--layout-m">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
    </div>
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>
    <div class="l-row l-row--items-3 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
    </div>
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item l-row__item--break-m">4</div>
    </div>
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item l-row__item--break-m">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>

<!--[if (lte IE 9) & (!IEMobile)]>
</div>
<![endif]-->

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

/* ==========================================================================
   Guss: row
   ========================================================================== */

/**
 * A row is an ensemble of 2, 3 or 4 items that are originally stacked
 * vertically on mobile and flow horizontally on higher breakpoints.
 * Examples: http://sassmeister.com/gist/7986076
 *
 * Usage 1: Sass mixin
 * @include guss-row('.classname');
 *
 * Usage 2: utility class set as `$guss-row-utility-class`
 * @include guss-row-utility;
 *
 * <div class="l-row l-row--items-<number of items contained>">
 *     <div class="l-row__item [l-row__item--boost-2]"></div>
 *     <div class="l-row__item"></div>
 *     <div class="l-row__item"></div>
 *     <div class="l-row__item [l-row__item--boost-1]"></div>
 * </div>
 *
 * --boost-n modifiers are used to add visual importance to an item.
 * Note that this applies only to browsers that support flexbox.
 */

$guss-row-utility-class: '.l-row' !default;

// When set to false, output a simpler version with a static width
// http://caniuse.com/#feat=flexbox
$browser-supports-flexbox: true !default;

// Static width for older browsers
$guss-row-fallback-width: 940px !default;

@mixin guss-row($base-class) {
    @if ($browser-supports-flexbox) {
        @include mq(tablet) {
            #{$base-class} {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-direction: normal;
                -moz-box-direction: normal;
                -webkit-box-orient: horizontal;
                -moz-box-orient: horizontal;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-align-content: stretch;
                -ms-flex-line-pack: stretch;
                align-content: stretch;
                -webkit-box-align: stretch;
                -moz-box-align: stretch;
                -webkit-align-items: stretch;
                -ms-flex-align: stretch;
                align-items: stretch;
                width: 100%; // Prevent consecutive rows from flexing together in FF
            }
            #{$base-class}__item {
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                @include flex-grow(1);
                @include flex-basis(0);
                width: 0; // Prevent items to grow out of their parent in FF
            }
            #{$base-class}__item--boost-1 { @include flex-grow(1.5); }
            #{$base-class}__item--boost-2 { @include flex-grow(2); }
        }

        // Mobile layout variation:
        // - Items are aligned horizontally, 50% each
        // - Should degrade into a vertical list
        //
        // Browser support:
        // - iOS 7+ (-webkit- prefix required)
        // - Chrome
        // - IE 11+
        // - Firefox 28+ (for flex-wrap support)
        @include mq($to: tablet) {
            #{$base-class}--layout-m {
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;

                // Items fill half the width of their container
                #{$base-class}__item {
                    -webkit-flex-basis: 50%;
                    flex-basis: 50%;
                }

                // Break the flow on mobile:
                // Item will fill the whole width of its container
                #{$base-class}__item--break-m {
                    -webkit-flex: 1 100%;
                    flex: 1 100%;
                }
            }
        }
    } @else {
        #{$base-class} {
            width: $guss-row-fallback-width;

            // Micro clearfix (http://nicolasgallagher.com/micro-clearfix-hack/)
            zoom: 1;

            &:after,
            &:before {
                content: "";
                display: table;
            }
            &:after {
                clear: both;
            }
        }

        #{$base-class}__item {
            float: left;
        }
        @each $i in 2, 3, 4 {
            #{$base-class}--items-#{$i} #{$base-class}__item {
                width: $guss-row-fallback-width / $i;
            }
        }
    }
}

@mixin guss-row-utility {
    @include guss-row($guss-row-utility-class);
}



@mixin flex($flex-grow: 0, $flex-shrink: 1, $flex-basis: auto) {
    -webkit-box-flex: $flex-grow;
    -moz-box-flex: $flex-grow;
    -webkit-flex: $flex-grow $flex-shrink $flex-basis;
    -ms-flex: $flex-grow $flex-shrink $flex-basis;
    flex: $flex-grow $flex-shrink $flex-basis;
}

@mixin flex-grow($int: 0) {
    -webkit-box-flex: $int;
    -webkit-flex-grow: $int;
    -moz-flex-grow: $int;
    -ms-flex-positive: $int;
    flex-grow: $int;
}

@mixin flex-basis($value: auto) {
    -webkit-flex-basis: $value;
    -moz-flex-basis: $value;
    -ms-flex-preferred-size: $value;
    flex-basis: $value;
}

// To enable support for browsers that do not support @media queries,
// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
// Create a separate stylesheet served exclusively to these browsers,
// meaning @media queries will be rasterized, relying on the cascade itself
$mq-responsive: true !default;

// Name your breakpoints in a way that creates a ubiquitous language
// across team members. It will improve communication between
// stakeholders, designers, developers, and testers.
$mq-breakpoints: (
    mobile:  300px,
    tablet:  600px,
    desktop: 900px,
    wide:    1260px
) !default;

// Define the breakpoint from the $mq-breakpoints list that should
// be used as the target width when outputting a static stylesheet
// (i.e. when $mq-responsive is set to 'false').
$mq-static-breakpoint: desktop !default;

// If you want to display the currently active breakpoint in the top
// right corner of your site during development, add the breakpoints
// to this list, ordered by width, e.g. (mobile, tablet, desktop).
$mq-show-breakpoints: () !default;

@function mq-px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return mq-px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

@function mq-get-breakpoint-width($name) {
    @if(map-has-key($mq-breakpoints, $name)) {
        @return map-get($mq-breakpoints, $name);
    } @else {
        @return 'Breakpoint #{$name} does not exist';
    }
}

// Media Query mixin
// Usage:
// .element {
//     @include mq($from: mobile) {
//         color: red;
//     }
//     @include mq($to: tablet) {
//         color: blue;
//     }
//     @include mq(mobile, tablet) {
//         color: green;
//     }
//     @include mq($from: tablet, $and: '(orientation: landscape)') {
//         color: teal;
//     }
//     @include mq(950px) {
//         color: hotpink;
//     }
// }

@mixin mq($from: false, $to: false, $and: false) {

    // Initialize variables
    $min-width: 0;
    $max-width: 0;
    $mediaQuery: '';

    // From: this breakpoint (inclusive)
    @if $from {
        @if type-of($from) == number {
            $min-width: mq-px2em($from);
        } @else {
            $min-width: mq-px2em(mq-get-breakpoint-width($from));
        }
    }

    // To: that breakpoint (exclusive)
    @if $to {
        @if type-of($to) == number {
            $max-width: mq-px2em($to);
        } @else {
            $max-width: mq-px2em(mq-get-breakpoint-width($to)) - .01em;
        }
    }

    // Responsive support is disabled, rasterize the output outside @media blocks
    // The browser will rely on the cascade itself.
    @if ($mq-responsive == false) {
        $static-breakpoint-width: mq-get-breakpoint-width($mq-static-breakpoint);
        @if type-of($static-breakpoint-width) == number {
            $target-width: mq-px2em($static-breakpoint-width);
            // Output only rules that start at or span our target width
            @if ($and == false and ($min-width <= $target-width) and (($to == false) or ($max-width >= $target-width))) {
                @content;
            }
        } @else {
            // Throw a warning if $mq-static-breakpoint is not in the $mq-breakpoints list
            @warn "No static styles will be output: #{$static-breakpoint-width}";
        }
    }

    // Responsive support is enabled, output rules inside @media queries
    @else {
        @if $min-width != 0 { $mediaQuery: '#{$mediaQuery} and (min-width: #{$min-width})'; }
        @if $max-width != 0 { $mediaQuery: '#{$mediaQuery} and (max-width: #{$max-width})'; }
        @if $and            { $mediaQuery: '#{$mediaQuery} and #{$and}'; }

        $mediaQuery: unquote(#{$mediaQuery});

        @media all #{$mediaQuery} {
            @content;
        }
    }
}

// Add a breakpoint
// Usage: $mq-breakpoints: mq-add-breakpoint(tvscreen, 1920px);
@function mq-add-breakpoint($name, $breakpoint) {
    $new-breakpoint: (#{$name}: $breakpoint);
    @return map-merge($mq-breakpoints, $new-breakpoint);
}

// Show the active breakpoint in the top right corner of the viewport
@if (length($mq-show-breakpoints) > 0) {
    body:before {
        background-color: #FCF8E3;
        border-bottom: 1px solid #FBEED5;
        border-left: 1px solid #FBEED5;
        color: #C09853;
        font: small-caption;
        padding: 3px 6px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;

        // Loop through the breakpoints that should be shown
        @each $show-breakpoint in $mq-show-breakpoints {
            $width: mq-get-breakpoint-width($show-breakpoint);
            @include mq($show-breakpoint) {
                content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})";
            }
        }
    }
}

/* Examples */
@include guss-row-utility;
@include guss-row('.my-selector');

/* No support for flexbox in old IE :( */
.old-ie {
    $browser-supports-flexbox: false;
    $guss-row-fallback-width: 960px;
    @include guss-row-utility;
    @include guss-row('.my-selector');
}

/* Global example styles */
body {
    font: bold 40px/1 sans-serif;
    max-width: 960px;
    margin: 10px auto;
}
#{$guss-row-utility-class}__item {
    min-height: 200px;
    background: navy;
    color: white;
    margin-bottom: 30px;

    @include mq(tablet) {
        & + & {
            border-left: 20px solid white;
        }
    }
}

SassMeister-output.css

/* ==========================================================================
   Guss: row
   ========================================================================== */
/**
 * A row is an ensemble of 2, 3 or 4 items that are originally stacked
 * vertically on mobile and flow horizontally on higher breakpoints.
 * Examples: http://sassmeister.com/gist/7986076
 *
 * Usage 1: Sass mixin
 * @include guss-row('.classname');
 *
 * Usage 2: utility class set as `$guss-row-utility-class`
 * @include guss-row-utility;
 *
 * <div class="l-row l-row--items-<number of items contained>">
 *     <div class="l-row__item [l-row__item--boost-2]"></div>
 *     <div class="l-row__item"></div>
 *     <div class="l-row__item"></div>
 *     <div class="l-row__item [l-row__item--boost-1]"></div>
 * </div>
 *
 * --boost-n modifiers are used to add visual importance to an item.
 * Note that this applies only to browsers that support flexbox.
 */
/* Examples */
@media all and (min-width: 37.5em) {
  .l-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
  }

  .l-row__item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    width: 0;
  }

  .l-row__item--boost-1 {
    -webkit-box-flex: 1.5;
    -webkit-flex-grow: 1.5;
    -moz-flex-grow: 1.5;
    -ms-flex-positive: 1.5;
    flex-grow: 1.5;
  }

  .l-row__item--boost-2 {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
  }
}
@media all and (max-width: 37.49em) {
  .l-row--layout-m {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .l-row--layout-m .l-row__item {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
  }
  .l-row--layout-m .l-row__item--break-m {
    -webkit-flex: 1 100%;
    flex: 1 100%;
  }
}
@media all and (min-width: 37.5em) {
  .my-selector {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
  }

  .my-selector__item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    width: 0;
  }

  .my-selector__item--boost-1 {
    -webkit-box-flex: 1.5;
    -webkit-flex-grow: 1.5;
    -moz-flex-grow: 1.5;
    -ms-flex-positive: 1.5;
    flex-grow: 1.5;
  }

  .my-selector__item--boost-2 {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
  }
}
@media all and (max-width: 37.49em) {
  .my-selector--layout-m {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .my-selector--layout-m .my-selector__item {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
  }
  .my-selector--layout-m .my-selector__item--break-m {
    -webkit-flex: 1 100%;
    flex: 1 100%;
  }
}
/* No support for flexbox in old IE :( */
.old-ie .l-row {
  width: 960px;
  zoom: 1;
}
.old-ie .l-row:after, .old-ie .l-row:before {
  content: "";
  display: table;
}
.old-ie .l-row:after {
  clear: both;
}
.old-ie .l-row__item {
  float: left;
}
.old-ie .l-row--items-2 .l-row__item {
  width: 480px;
}
.old-ie .l-row--items-3 .l-row__item {
  width: 320px;
}
.old-ie .l-row--items-4 .l-row__item {
  width: 240px;
}
.old-ie .my-selector {
  width: 960px;
  zoom: 1;
}
.old-ie .my-selector:after, .old-ie .my-selector:before {
  content: "";
  display: table;
}
.old-ie .my-selector:after {
  clear: both;
}
.old-ie .my-selector__item {
  float: left;
}
.old-ie .my-selector--items-2 .my-selector__item {
  width: 480px;
}
.old-ie .my-selector--items-3 .my-selector__item {
  width: 320px;
}
.old-ie .my-selector--items-4 .my-selector__item {
  width: 240px;
}

/* Global example styles */
body {
  font: bold 40px/1 sans-serif;
  max-width: 960px;
  margin: 10px auto;
}

.l-row__item {
  min-height: 200px;
  background: navy;
  color: white;
  margin-bottom: 30px;
}
@media all and (min-width: 37.5em) {
  .l-row__item + .l-row__item {
    border-left: 20px solid white;
  }
}

SassMeister-rendered.html

<h1>Row test</h1>
<!--[if (lte IE 9) & (!IEMobile)]>
<div class="old-ie">
<![endif]-->

    <!-- items: 2 -->
    <div class="l-row l-row--items-2">
        <div class="l-row__item l-row__item--boost-1">1+</div>
        <div class="l-row__item">2</div>
    </div>
    <div class="l-row l-row--items-2">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
    </div>
    <div class="l-row l-row--items-2">
        <div class="l-row__item">1</div>
        <div class="l-row__item l-row__item--boost-2">2++</div>
    </div>

    <!-- items: 3 -->
    <div class="l-row l-row--items-3">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
    </div>
    <div class="l-row l-row--items-3">
        <div class="l-row__item">1</div>
        <div class="l-row__item l-row__item--boost-1">2+</div>
        <div class="l-row__item">3</div>
    </div>
    <div class="l-row l-row--items-3">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item l-row__item--boost-2">3++</div>
    </div>

    <!-- items: 4 -->
    <div class="l-row l-row--items-4">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>

    <hr />
    <h2>Mobile layouts</h2>
    <div class="l-row l-row--items-2 l-row--layout-m">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
    </div>
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>
    <div class="l-row l-row--items-3 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
    </div>
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item l-row__item--break-m">4</div>
    </div>
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item l-row__item--break-m">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>

<!--[if (lte IE 9) & (!IEMobile)]>
</div>
<![endif]-->