Generated by SassMeister.com.

input.scss

$grid-total-size: 12 !default;
$max-width: 100% !default;
$prefix: "" !default;
$col-name-default: "col" !default;
$grid-size: "#{$max-width} / #{$grid-total-size}" !default;
$breakponts: (
  "xs": "(max-width: 600px)",
  "sm": "(min-width: 601px) and (max-width:960px)",
  "md": "(min-width: 961px) and (max-width:1264px)",
  "lg": "(min-width: 1265px) and (max-width:1903px)",
  "xl": "(min-width: 1904px)"
) !default;

@mixin grid-system() {
  $col-name: $col-name-default;
  @if $prefix != "" {
    $col-name: "#{$prefix}-col";
  }

  .#{$col-name} {
    @for $index from 1 through $grid-total-size {
      &-#{$index} {
        width: calc(#{$grid-size} * #{$index});
      }
    }
  }

  @each $name, $mq in $breakponts {
    @media #{$mq} {
      @for $index from 1 through $grid-total-size {
        @if $prefix != "" {
          .#{$prefix}-#{$name}-#{$index} {
            width: calc(#{$grid-size} * #{$index});
          }
        } @else {
          .#{$name}-#{$index} {
            width: calc(#{$grid-size} * #{$index});
          }
        }
      }
    }
  }
}

@include grid-system;

output.css

.col-1 {
  width: calc(100% / 12 * 1);
}
.col-2 {
  width: calc(100% / 12 * 2);
}
.col-3 {
  width: calc(100% / 12 * 3);
}
.col-4 {
  width: calc(100% / 12 * 4);
}
.col-5 {
  width: calc(100% / 12 * 5);
}
.col-6 {
  width: calc(100% / 12 * 6);
}
.col-7 {
  width: calc(100% / 12 * 7);
}
.col-8 {
  width: calc(100% / 12 * 8);
}
.col-9 {
  width: calc(100% / 12 * 9);
}
.col-10 {
  width: calc(100% / 12 * 10);
}
.col-11 {
  width: calc(100% / 12 * 11);
}
.col-12 {
  width: calc(100% / 12 * 12);
}

@media (max-width: 600px) {
  .xs-1 {
    width: calc(100% / 12 * 1);
  }

  .xs-2 {
    width: calc(100% / 12 * 2);
  }

  .xs-3 {
    width: calc(100% / 12 * 3);
  }

  .xs-4 {
    width: calc(100% / 12 * 4);
  }

  .xs-5 {
    width: calc(100% / 12 * 5);
  }

  .xs-6 {
    width: calc(100% / 12 * 6);
  }

  .xs-7 {
    width: calc(100% / 12 * 7);
  }

  .xs-8 {
    width: calc(100% / 12 * 8);
  }

  .xs-9 {
    width: calc(100% / 12 * 9);
  }

  .xs-10 {
    width: calc(100% / 12 * 10);
  }

  .xs-11 {
    width: calc(100% / 12 * 11);
  }

  .xs-12 {
    width: calc(100% / 12 * 12);
  }
}
@media (min-width: 601px) and (max-width:960px) {
  .sm-1 {
    width: calc(100% / 12 * 1);
  }

  .sm-2 {
    width: calc(100% / 12 * 2);
  }

  .sm-3 {
    width: calc(100% / 12 * 3);
  }

  .sm-4 {
    width: calc(100% / 12 * 4);
  }

  .sm-5 {
    width: calc(100% / 12 * 5);
  }

  .sm-6 {
    width: calc(100% / 12 * 6);
  }

  .sm-7 {
    width: calc(100% / 12 * 7);
  }

  .sm-8 {
    width: calc(100% / 12 * 8);
  }

  .sm-9 {
    width: calc(100% / 12 * 9);
  }

  .sm-10 {
    width: calc(100% / 12 * 10);
  }

  .sm-11 {
    width: calc(100% / 12 * 11);
  }

  .sm-12 {
    width: calc(100% / 12 * 12);
  }
}
@media (min-width: 961px) and (max-width:1264px) {
  .md-1 {
    width: calc(100% / 12 * 1);
  }

  .md-2 {
    width: calc(100% / 12 * 2);
  }

  .md-3 {
    width: calc(100% / 12 * 3);
  }

  .md-4 {
    width: calc(100% / 12 * 4);
  }

  .md-5 {
    width: calc(100% / 12 * 5);
  }

  .md-6 {
    width: calc(100% / 12 * 6);
  }

  .md-7 {
    width: calc(100% / 12 * 7);
  }

  .md-8 {
    width: calc(100% / 12 * 8);
  }

  .md-9 {
    width: calc(100% / 12 * 9);
  }

  .md-10 {
    width: calc(100% / 12 * 10);
  }

  .md-11 {
    width: calc(100% / 12 * 11);
  }

  .md-12 {
    width: calc(100% / 12 * 12);
  }
}
@media (min-width: 1265px) and (max-width:1903px) {
  .lg-1 {
    width: calc(100% / 12 * 1);
  }

  .lg-2 {
    width: calc(100% / 12 * 2);
  }

  .lg-3 {
    width: calc(100% / 12 * 3);
  }

  .lg-4 {
    width: calc(100% / 12 * 4);
  }

  .lg-5 {
    width: calc(100% / 12 * 5);
  }

  .lg-6 {
    width: calc(100% / 12 * 6);
  }

  .lg-7 {
    width: calc(100% / 12 * 7);
  }

  .lg-8 {
    width: calc(100% / 12 * 8);
  }

  .lg-9 {
    width: calc(100% / 12 * 9);
  }

  .lg-10 {
    width: calc(100% / 12 * 10);
  }

  .lg-11 {
    width: calc(100% / 12 * 11);
  }

  .lg-12 {
    width: calc(100% / 12 * 12);
  }
}
@media (min-width: 1904px) {
  .xl-1 {
    width: calc(100% / 12 * 1);
  }

  .xl-2 {
    width: calc(100% / 12 * 2);
  }

  .xl-3 {
    width: calc(100% / 12 * 3);
  }

  .xl-4 {
    width: calc(100% / 12 * 4);
  }

  .xl-5 {
    width: calc(100% / 12 * 5);
  }

  .xl-6 {
    width: calc(100% / 12 * 6);
  }

  .xl-7 {
    width: calc(100% / 12 * 7);
  }

  .xl-8 {
    width: calc(100% / 12 * 8);
  }

  .xl-9 {
    width: calc(100% / 12 * 9);
  }

  .xl-10 {
    width: calc(100% / 12 * 10);
  }

  .xl-11 {
    width: calc(100% / 12 * 11);
  }

  .xl-12 {
    width: calc(100% / 12 * 12);
  }
}

settings.json

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