Generated by SassMeister.com.

input.scss

.loop1 {
    @for $i from 1 through 2 {
        &-#{$i} {
            width: 100%;
            max-width: (100% / 12) * $i;
            flex-basis: (100% / 12) * $i;
        }
        &-#{$i}\@sm {
            @media (min-width: 768px) {
                max-width: (100% / 12) * $i;
                flex-basis: (100% / 12) * $i;
            }
        }
        &-#{$i}\@md {
            @media (min-width: 992px) {
                max-width: (100% / 12) * $i;
                flex-basis: (100% / 12) * $i;
            }
        }
        &-#{$i}\@lg {
            @media (min-width: 1200px) {
                max-width: (100% / 12) * $i;
                flex-basis: (100% / 12) * $i;
            }
        }
    }
}

.loop2 {
    @for $i from 1 through 2 {
        &-#{$i} {
            width: 100%;
            max-width: (100% / 12) * $i;
            flex-basis: (100% / 12) * $i;
        }
    }
    @for $i from 1 through 12 {
        &-#{$i}\@sm {
            @media (min-width: 768px) {
                max-width: (100% / 12) * $i;
                flex-basis: (100% / 12) * $i;
            }
        }
    }
    @for $i from 1 through 12 {
        &-#{$i}\@md {
            @media (min-width: 992px) {
                max-width: (100% / 12) * $i;
                flex-basis: (100% / 12) * $i;
            }
        }
    }
    @for $i from 1 through 12 {
        &-#{$i}\@lg {
            @media (min-width: 1200px) {
                max-width: (100% / 12) * $i;
                flex-basis: (100% / 12) * $i;
            }
        }
    }
}

output.css

.loop1-1 {
  width: 100%;
  max-width: 8.3333333333%;
  flex-basis: 8.3333333333%;
}
@media (min-width: 768px) {
  .loop1-1\@sm {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
}
@media (min-width: 992px) {
  .loop1-1\@md {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
}
@media (min-width: 1200px) {
  .loop1-1\@lg {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
}
.loop1-2 {
  width: 100%;
  max-width: 16.6666666667%;
  flex-basis: 16.6666666667%;
}
@media (min-width: 768px) {
  .loop1-2\@sm {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
}
@media (min-width: 992px) {
  .loop1-2\@md {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
}
@media (min-width: 1200px) {
  .loop1-2\@lg {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
}

.loop2-1 {
  width: 100%;
  max-width: 8.3333333333%;
  flex-basis: 8.3333333333%;
}
.loop2-2 {
  width: 100%;
  max-width: 16.6666666667%;
  flex-basis: 16.6666666667%;
}
@media (min-width: 768px) {
  .loop2-1\@sm {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
}
@media (min-width: 768px) {
  .loop2-2\@sm {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
}
@media (min-width: 768px) {
  .loop2-3\@sm {
    max-width: 25%;
    flex-basis: 25%;
  }
}
@media (min-width: 768px) {
  .loop2-4\@sm {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
}
@media (min-width: 768px) {
  .loop2-5\@sm {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
}
@media (min-width: 768px) {
  .loop2-6\@sm {
    max-width: 50%;
    flex-basis: 50%;
  }
}
@media (min-width: 768px) {
  .loop2-7\@sm {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
}
@media (min-width: 768px) {
  .loop2-8\@sm {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
}
@media (min-width: 768px) {
  .loop2-9\@sm {
    max-width: 75%;
    flex-basis: 75%;
  }
}
@media (min-width: 768px) {
  .loop2-10\@sm {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
}
@media (min-width: 768px) {
  .loop2-11\@sm {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
}
@media (min-width: 768px) {
  .loop2-12\@sm {
    max-width: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 992px) {
  .loop2-1\@md {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
}
@media (min-width: 992px) {
  .loop2-2\@md {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
}
@media (min-width: 992px) {
  .loop2-3\@md {
    max-width: 25%;
    flex-basis: 25%;
  }
}
@media (min-width: 992px) {
  .loop2-4\@md {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
}
@media (min-width: 992px) {
  .loop2-5\@md {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
}
@media (min-width: 992px) {
  .loop2-6\@md {
    max-width: 50%;
    flex-basis: 50%;
  }
}
@media (min-width: 992px) {
  .loop2-7\@md {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
}
@media (min-width: 992px) {
  .loop2-8\@md {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
}
@media (min-width: 992px) {
  .loop2-9\@md {
    max-width: 75%;
    flex-basis: 75%;
  }
}
@media (min-width: 992px) {
  .loop2-10\@md {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
}
@media (min-width: 992px) {
  .loop2-11\@md {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
}
@media (min-width: 992px) {
  .loop2-12\@md {
    max-width: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 1200px) {
  .loop2-1\@lg {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
}
@media (min-width: 1200px) {
  .loop2-2\@lg {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
}
@media (min-width: 1200px) {
  .loop2-3\@lg {
    max-width: 25%;
    flex-basis: 25%;
  }
}
@media (min-width: 1200px) {
  .loop2-4\@lg {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
}
@media (min-width: 1200px) {
  .loop2-5\@lg {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
}
@media (min-width: 1200px) {
  .loop2-6\@lg {
    max-width: 50%;
    flex-basis: 50%;
  }
}
@media (min-width: 1200px) {
  .loop2-7\@lg {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
}
@media (min-width: 1200px) {
  .loop2-8\@lg {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
}
@media (min-width: 1200px) {
  .loop2-9\@lg {
    max-width: 75%;
    flex-basis: 75%;
  }
}
@media (min-width: 1200px) {
  .loop2-10\@lg {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
}
@media (min-width: 1200px) {
  .loop2-11\@lg {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
}
@media (min-width: 1200px) {
  .loop2-12\@lg {
    max-width: 100%;
    flex-basis: 100%;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}