Generated by SassMeister.com.

Modular CSS with Susy and a nested context.html

<main>
  <section class="containerComponent">
    <div class="leaf containerComponent-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    <div class="leaf containerComponent-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    <div class="leaf containerComponent-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    <!-- Try copy-pasting more leaves into the markup -->
    <!--
    <div class="leaf component-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    -->
  </section>
 </main>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

/* === Begin configuration === */
@import "susy";

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@include border-box-sizing;

$susy: (
  columns: 12,
  gutters: 1/3,
  container: 450px,
  debug: (image: show, output: overlay)
);

html { background: white; }

main {
  @include container;
}
/* === End configuration === */

/* leaf/css/_layout */
.leaf {
  label,
  input {
    @include full;
  }
}

/* container/css/_layout */

.containerComponent {
  @include clearfix;
  
  @include pre(1);
  @include post(1);
}

.containerComponent-leaf {
  @include nested(10) {
    &.leaf {
      @include span(5);
    }
    
    &.leaf:nth-child(2n+1) {
      // same as @include span(5 break);
      @include break;
    }
      
    &.leaf:nth-child(2n) {
      // same as @include span(5 last);
      @include last;
    }
    
    &.leaf:last-child:not(:nth-child(2n)) {
      @include full;
    }
  }
}

SassMeister-output.css

/* === Begin configuration === */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background: white;
}

main {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
main:after {
  content: " ";
  display: block;
  clear: both;
}
head {
  display: block;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 999;
  color: #333;
  background: rgba(255, 255, 255, 0.25);
}
head:before {
  content: "|||";
  display: block;
  padding: 5px 10px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
}
head:hover {
  background: rgba(255, 255, 255, 0.5);
  color: red;
}
head:hover ~ main, head:hover ~ body main {
  position: relative;
}
head:hover ~ main:before, head:hover ~ body main:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 75%, transparent 75%);
  background-size: 8.51064%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

/* === End configuration === */
/* leaf/css/_layout */
.leaf label,
.leaf input {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

/* container/css/_layout */
.containerComponent {
  margin-left: 8.51064%;
  margin-right: 8.51064%;
}
.containerComponent:after {
  content: "";
  display: table;
  clear: both;
}

.containerComponent-leaf.leaf {
  width: 48.71795%;
  float: left;
  margin-right: 2.5641%;
}
.containerComponent-leaf.leaf:nth-child(2n+1) {
  clear: both;
}
.containerComponent-leaf.leaf:nth-child(2n) {
  float: right;
  margin-right: 0;
}
.containerComponent-leaf.leaf:last-child:not(:nth-child(2n)) {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

SassMeister-rendered.html

<main>
  <section class="containerComponent">
    <div class="leaf containerComponent-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    <div class="leaf containerComponent-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    <div class="leaf containerComponent-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    <!-- Try copy-pasting more leaves into the markup -->
    <!--
    <div class="leaf component-leaf">
      <label>Hello</label>
      <input value="world" />
    </div>
    -->
  </section>
 </main>