Susy: nested grid classes

SassMeister-input.scss

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

@import "susy";

@include layout(12);

// Loop!
// -----

@for $i from 1 to susy-get(columns) {
  // use "%span-#{$i}" for silent classes
  .span-#{$i} {
    @include span($i);
  }
  
  @for $n from 1 to $i {
    .span-#{$n}-of-#{$i} {
      @include span($n of $i);
    }
  }
}

.full {
  @include full;
}

SassMeister-output.css

.span-1 {
  width: 6.77966%;
  float: left;
  margin-right: 1.69492%;
}

.span-2 {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-2 {
  width: 44.44444%;
  float: left;
  margin-right: 11.11111%;
}

.span-3 {
  width: 23.72881%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-3 {
  width: 28.57143%;
  float: left;
  margin-right: 7.14286%;
}

.span-2-of-3 {
  width: 64.28571%;
  float: left;
  margin-right: 7.14286%;
}

.span-4 {
  width: 32.20339%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-4 {
  width: 21.05263%;
  float: left;
  margin-right: 5.26316%;
}

.span-2-of-4 {
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
}

.span-3-of-4 {
  width: 73.68421%;
  float: left;
  margin-right: 5.26316%;
}

.span-5 {
  width: 40.67797%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-5 {
  width: 16.66667%;
  float: left;
  margin-right: 4.16667%;
}

.span-2-of-5 {
  width: 37.5%;
  float: left;
  margin-right: 4.16667%;
}

.span-3-of-5 {
  width: 58.33333%;
  float: left;
  margin-right: 4.16667%;
}

.span-4-of-5 {
  width: 79.16667%;
  float: left;
  margin-right: 4.16667%;
}

.span-6 {
  width: 49.15254%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-6 {
  width: 13.7931%;
  float: left;
  margin-right: 3.44828%;
}

.span-2-of-6 {
  width: 31.03448%;
  float: left;
  margin-right: 3.44828%;
}

.span-3-of-6 {
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
}

.span-4-of-6 {
  width: 65.51724%;
  float: left;
  margin-right: 3.44828%;
}

.span-5-of-6 {
  width: 82.75862%;
  float: left;
  margin-right: 3.44828%;
}

.span-7 {
  width: 57.62712%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-7 {
  width: 11.76471%;
  float: left;
  margin-right: 2.94118%;
}

.span-2-of-7 {
  width: 26.47059%;
  float: left;
  margin-right: 2.94118%;
}

.span-3-of-7 {
  width: 41.17647%;
  float: left;
  margin-right: 2.94118%;
}

.span-4-of-7 {
  width: 55.88235%;
  float: left;
  margin-right: 2.94118%;
}

.span-5-of-7 {
  width: 70.58824%;
  float: left;
  margin-right: 2.94118%;
}

.span-6-of-7 {
  width: 85.29412%;
  float: left;
  margin-right: 2.94118%;
}

.span-8 {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-8 {
  width: 10.25641%;
  float: left;
  margin-right: 2.5641%;
}

.span-2-of-8 {
  width: 23.07692%;
  float: left;
  margin-right: 2.5641%;
}

.span-3-of-8 {
  width: 35.89744%;
  float: left;
  margin-right: 2.5641%;
}

.span-4-of-8 {
  width: 48.71795%;
  float: left;
  margin-right: 2.5641%;
}

.span-5-of-8 {
  width: 61.53846%;
  float: left;
  margin-right: 2.5641%;
}

.span-6-of-8 {
  width: 74.35897%;
  float: left;
  margin-right: 2.5641%;
}

.span-7-of-8 {
  width: 87.17949%;
  float: left;
  margin-right: 2.5641%;
}

.span-9 {
  width: 74.57627%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-9 {
  width: 9.09091%;
  float: left;
  margin-right: 2.27273%;
}

.span-2-of-9 {
  width: 20.45455%;
  float: left;
  margin-right: 2.27273%;
}

.span-3-of-9 {
  width: 31.81818%;
  float: left;
  margin-right: 2.27273%;
}

.span-4-of-9 {
  width: 43.18182%;
  float: left;
  margin-right: 2.27273%;
}

.span-5-of-9 {
  width: 54.54545%;
  float: left;
  margin-right: 2.27273%;
}

.span-6-of-9 {
  width: 65.90909%;
  float: left;
  margin-right: 2.27273%;
}

.span-7-of-9 {
  width: 77.27273%;
  float: left;
  margin-right: 2.27273%;
}

.span-8-of-9 {
  width: 88.63636%;
  float: left;
  margin-right: 2.27273%;
}

.span-10 {
  width: 83.05085%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-10 {
  width: 8.16327%;
  float: left;
  margin-right: 2.04082%;
}

.span-2-of-10 {
  width: 18.36735%;
  float: left;
  margin-right: 2.04082%;
}

.span-3-of-10 {
  width: 28.57143%;
  float: left;
  margin-right: 2.04082%;
}

.span-4-of-10 {
  width: 38.77551%;
  float: left;
  margin-right: 2.04082%;
}

.span-5-of-10 {
  width: 48.97959%;
  float: left;
  margin-right: 2.04082%;
}

.span-6-of-10 {
  width: 59.18367%;
  float: left;
  margin-right: 2.04082%;
}

.span-7-of-10 {
  width: 69.38776%;
  float: left;
  margin-right: 2.04082%;
}

.span-8-of-10 {
  width: 79.59184%;
  float: left;
  margin-right: 2.04082%;
}

.span-9-of-10 {
  width: 89.79592%;
  float: left;
  margin-right: 2.04082%;
}

.span-11 {
  width: 91.52542%;
  float: left;
  margin-right: 1.69492%;
}

.span-1-of-11 {
  width: 7.40741%;
  float: left;
  margin-right: 1.85185%;
}

.span-2-of-11 {
  width: 16.66667%;
  float: left;
  margin-right: 1.85185%;
}

.span-3-of-11 {
  width: 25.92593%;
  float: left;
  margin-right: 1.85185%;
}

.span-4-of-11 {
  width: 35.18519%;
  float: left;
  margin-right: 1.85185%;
}

.span-5-of-11 {
  width: 44.44444%;
  float: left;
  margin-right: 1.85185%;
}

.span-6-of-11 {
  width: 53.7037%;
  float: left;
  margin-right: 1.85185%;
}

.span-7-of-11 {
  width: 62.96296%;
  float: left;
  margin-right: 1.85185%;
}

.span-8-of-11 {
  width: 72.22222%;
  float: left;
  margin-right: 1.85185%;
}

.span-9-of-11 {
  width: 81.48148%;
  float: left;
  margin-right: 1.85185%;
}

.span-10-of-11 {
  width: 90.74074%;
  float: left;
  margin-right: 1.85185%;
}

.full {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}