Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$columns: 10 12;
$bp: 'lg';

@for $i from 1 through length($columns) {
  .flex-#{nth($columns, $i)} {
    @for $j from 1 through nth($columns, $i) {
      .flex__item--#{$bp}-#{$j} {
        flex-basis: ((100% / nth($columns, $i))*$j);
        max-width: ((100% / nth($columns, $i)*$j));
      }
    }
    @for $j from 1 through nth($columns, $i) - 1 {
      .flex__offset--#{$bp}-#{$j} {
        margin-left: ((100% / nth($columns, $i))*$j);
      }
    }
  }
}

SassMeister-output.css

.flex-10 .flex__item--lg-1 {
  flex-basis: 10%;
  max-width: 10%;
}
.flex-10 .flex__item--lg-2 {
  flex-basis: 20%;
  max-width: 20%;
}
.flex-10 .flex__item--lg-3 {
  flex-basis: 30%;
  max-width: 30%;
}
.flex-10 .flex__item--lg-4 {
  flex-basis: 40%;
  max-width: 40%;
}
.flex-10 .flex__item--lg-5 {
  flex-basis: 50%;
  max-width: 50%;
}
.flex-10 .flex__item--lg-6 {
  flex-basis: 60%;
  max-width: 60%;
}
.flex-10 .flex__item--lg-7 {
  flex-basis: 70%;
  max-width: 70%;
}
.flex-10 .flex__item--lg-8 {
  flex-basis: 80%;
  max-width: 80%;
}
.flex-10 .flex__item--lg-9 {
  flex-basis: 90%;
  max-width: 90%;
}
.flex-10 .flex__item--lg-10 {
  flex-basis: 100%;
  max-width: 100%;
}
.flex-10 .flex__offset--lg-1 {
  margin-left: 10%;
}
.flex-10 .flex__offset--lg-2 {
  margin-left: 20%;
}
.flex-10 .flex__offset--lg-3 {
  margin-left: 30%;
}
.flex-10 .flex__offset--lg-4 {
  margin-left: 40%;
}
.flex-10 .flex__offset--lg-5 {
  margin-left: 50%;
}
.flex-10 .flex__offset--lg-6 {
  margin-left: 60%;
}
.flex-10 .flex__offset--lg-7 {
  margin-left: 70%;
}
.flex-10 .flex__offset--lg-8 {
  margin-left: 80%;
}
.flex-10 .flex__offset--lg-9 {
  margin-left: 90%;
}

.flex-12 .flex__item--lg-1 {
  flex-basis: 8.33333%;
  max-width: 8.33333%;
}
.flex-12 .flex__item--lg-2 {
  flex-basis: 16.66667%;
  max-width: 16.66667%;
}
.flex-12 .flex__item--lg-3 {
  flex-basis: 25%;
  max-width: 25%;
}
.flex-12 .flex__item--lg-4 {
  flex-basis: 33.33333%;
  max-width: 33.33333%;
}
.flex-12 .flex__item--lg-5 {
  flex-basis: 41.66667%;
  max-width: 41.66667%;
}
.flex-12 .flex__item--lg-6 {
  flex-basis: 50%;
  max-width: 50%;
}
.flex-12 .flex__item--lg-7 {
  flex-basis: 58.33333%;
  max-width: 58.33333%;
}
.flex-12 .flex__item--lg-8 {
  flex-basis: 66.66667%;
  max-width: 66.66667%;
}
.flex-12 .flex__item--lg-9 {
  flex-basis: 75%;
  max-width: 75%;
}
.flex-12 .flex__item--lg-10 {
  flex-basis: 83.33333%;
  max-width: 83.33333%;
}
.flex-12 .flex__item--lg-11 {
  flex-basis: 91.66667%;
  max-width: 91.66667%;
}
.flex-12 .flex__item--lg-12 {
  flex-basis: 100%;
  max-width: 100%;
}
.flex-12 .flex__offset--lg-1 {
  margin-left: 8.33333%;
}
.flex-12 .flex__offset--lg-2 {
  margin-left: 16.66667%;
}
.flex-12 .flex__offset--lg-3 {
  margin-left: 25%;
}
.flex-12 .flex__offset--lg-4 {
  margin-left: 33.33333%;
}
.flex-12 .flex__offset--lg-5 {
  margin-left: 41.66667%;
}
.flex-12 .flex__offset--lg-6 {
  margin-left: 50%;
}
.flex-12 .flex__offset--lg-7 {
  margin-left: 58.33333%;
}
.flex-12 .flex__offset--lg-8 {
  margin-left: 66.66667%;
}
.flex-12 .flex__offset--lg-9 {
  margin-left: 75%;
}
.flex-12 .flex__offset--lg-10 {
  margin-left: 83.33333%;
}
.flex-12 .flex__offset--lg-11 {
  margin-left: 91.66667%;
}