Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@mixin generate-grid($col: 12) {
  @for $i from 1 to $col + 1 {
    .col-#{$i} { flex: 0 0 percentage($i/$col); }
  }
}

$mobile-width: 48em;

.row {
  display: flex;
  @media (max-width: $mobile-width) {
    flex-direction: column;
  }
}
.col {
  flex: 1;
  @media (max-width: $mobile-width) {
    flex: 0 0 auto;
  }
}

@media (min-width: $mobile-width) {
  @include generate-grid();
}

SassMeister-output.css

.row {
  display: flex;
}

@media (max-width: 48em) {
  .row {
    flex-direction: column;
  }
}

.col {
  flex: 1;
}

@media (max-width: 48em) {
  .col {
    flex: 0 0 auto;
  }
}

@media (min-width: 48em) {
  .col-1 {
    flex: 0 0 8.33333%;
  }
  .col-2 {
    flex: 0 0 16.66667%;
  }
  .col-3 {
    flex: 0 0 25%;
  }
  .col-4 {
    flex: 0 0 33.33333%;
  }
  .col-5 {
    flex: 0 0 41.66667%;
  }
  .col-6 {
    flex: 0 0 50%;
  }
  .col-7 {
    flex: 0 0 58.33333%;
  }
  .col-8 {
    flex: 0 0 66.66667%;
  }
  .col-9 {
    flex: 0 0 75%;
  }
  .col-10 {
    flex: 0 0 83.33333%;
  }
  .col-11 {
    flex: 0 0 91.66667%;
  }
  .col-12 {
    flex: 0 0 100%;
  }
}