Generated by SassMeister.com.

SassMeister-input-HTML.haml

%ul.block-grid.four-up
    %li
        Dave
    %li
        troy
    %li
        thankyou foundation
    %li
        troy this works

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@function convert-number-to-word($num)
  $count: 1
  @each $word in one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen, eighteen, nineteen, twenty, twentyone, twentytwo, twentythree, twentyfour
    @if $count == $num
      @return $word
    $count: $count + 1
  @return "invalid"
  
$blockGridElements: 12 !default
$defaultFloat: left !default
.block-grid
  display: block
  overflow: hidden
  padding: 0
  box-sizing: border-box

  &>li
    display: block
    height: auto
    float: $defaultFloat
    box-sizing: border-box

  @for $i from 1 through $blockGridElements
    &.#{convert-number-to-word($i)}-up
      @if $i == 1
        margin: 0
      @else if $i == 2
        margin: 0 -15px
      @else if $i == 3
        margin: 0 -12px
      @else if $i == 4
        margin: 0 -10px
      @else
        margin: 0 -8px
      &>li
        width: 100%/$i
        @if $i == 1
          padding: 0 0 15px
        @else if $i == 2
          padding: 0 15px 15px
        @else if $i == 3
          padding: 0 12px 12px
        @else if $i == 4
          padding: 0 10px 10px
        @else
          padding: 0 8px 8px
        @if $i > 1
          &:nth-of-type(#{$i}n+1)
            clear: both

SassMeister-output.css

.block-grid {
  display: block;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
.block-grid > li {
  display: block;
  height: auto;
  float: left;
  box-sizing: border-box;
}
.block-grid.one-up {
  margin: 0;
}
.block-grid.one-up > li {
  width: 100%;
  padding: 0 0 15px;
}
.block-grid.two-up {
  margin: 0 -15px;
}
.block-grid.two-up > li {
  width: 50%;
  padding: 0 15px 15px;
}
.block-grid.two-up > li:nth-of-type(2n+1) {
  clear: both;
}
.block-grid.three-up {
  margin: 0 -12px;
}
.block-grid.three-up > li {
  width: 33.33333%;
  padding: 0 12px 12px;
}
.block-grid.three-up > li:nth-of-type(3n+1) {
  clear: both;
}
.block-grid.four-up {
  margin: 0 -10px;
}
.block-grid.four-up > li {
  width: 25%;
  padding: 0 10px 10px;
}
.block-grid.four-up > li:nth-of-type(4n+1) {
  clear: both;
}
.block-grid.five-up {
  margin: 0 -8px;
}
.block-grid.five-up > li {
  width: 20%;
  padding: 0 8px 8px;
}
.block-grid.five-up > li:nth-of-type(5n+1) {
  clear: both;
}
.block-grid.six-up {
  margin: 0 -8px;
}
.block-grid.six-up > li {
  width: 16.66667%;
  padding: 0 8px 8px;
}
.block-grid.six-up > li:nth-of-type(6n+1) {
  clear: both;
}
.block-grid.seven-up {
  margin: 0 -8px;
}
.block-grid.seven-up > li {
  width: 14.28571%;
  padding: 0 8px 8px;
}
.block-grid.seven-up > li:nth-of-type(7n+1) {
  clear: both;
}
.block-grid.eight-up {
  margin: 0 -8px;
}
.block-grid.eight-up > li {
  width: 12.5%;
  padding: 0 8px 8px;
}
.block-grid.eight-up > li:nth-of-type(8n+1) {
  clear: both;
}
.block-grid.nine-up {
  margin: 0 -8px;
}
.block-grid.nine-up > li {
  width: 11.11111%;
  padding: 0 8px 8px;
}
.block-grid.nine-up > li:nth-of-type(9n+1) {
  clear: both;
}
.block-grid.ten-up {
  margin: 0 -8px;
}
.block-grid.ten-up > li {
  width: 10%;
  padding: 0 8px 8px;
}
.block-grid.ten-up > li:nth-of-type(10n+1) {
  clear: both;
}
.block-grid.eleven-up {
  margin: 0 -8px;
}
.block-grid.eleven-up > li {
  width: 9.09091%;
  padding: 0 8px 8px;
}
.block-grid.eleven-up > li:nth-of-type(11n+1) {
  clear: both;
}
.block-grid.twelve-up {
  margin: 0 -8px;
}
.block-grid.twelve-up > li {
  width: 8.33333%;
  padding: 0 8px 8px;
}
.block-grid.twelve-up > li:nth-of-type(12n+1) {
  clear: both;
}

SassMeister-rendered.html

<ul class='block-grid four-up'>
  <li>
    Dave
  </li>
  <li>
    troy
  </li>
  <li>
    thankyou foundation
  </li>
  <li>
    troy this works
  </li>
</ul>