Generated by SassMeister.com.

input.scss

@for $i from 1 through 13 {
  @media (min-width: 576px) {
    .grid-start-sm-#{$i} {
      grid-column-start: #{$i};
    }

    .grid-end-sm-#{$i} {
      grid-column-end: #{$i};
      background: blue;
    }
  }

  @media (min-width: 768px) {
    .grid-start-lg-#{$i} {
      grid-column-start: #{$i};
    }

    .grid-end-lg-#{$i} {
      grid-column-end: #{$i};
      background: red;
    }
  }
}

output.css

@media (min-width: 576px) {
  .grid-start-sm-1 {
    grid-column-start: 1;
  }

  .grid-end-sm-1 {
    grid-column-end: 1;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-1 {
    grid-column-start: 1;
  }

  .grid-end-lg-1 {
    grid-column-end: 1;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-2 {
    grid-column-start: 2;
  }

  .grid-end-sm-2 {
    grid-column-end: 2;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-2 {
    grid-column-start: 2;
  }

  .grid-end-lg-2 {
    grid-column-end: 2;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-3 {
    grid-column-start: 3;
  }

  .grid-end-sm-3 {
    grid-column-end: 3;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-3 {
    grid-column-start: 3;
  }

  .grid-end-lg-3 {
    grid-column-end: 3;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-4 {
    grid-column-start: 4;
  }

  .grid-end-sm-4 {
    grid-column-end: 4;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-4 {
    grid-column-start: 4;
  }

  .grid-end-lg-4 {
    grid-column-end: 4;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-5 {
    grid-column-start: 5;
  }

  .grid-end-sm-5 {
    grid-column-end: 5;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-5 {
    grid-column-start: 5;
  }

  .grid-end-lg-5 {
    grid-column-end: 5;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-6 {
    grid-column-start: 6;
  }

  .grid-end-sm-6 {
    grid-column-end: 6;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-6 {
    grid-column-start: 6;
  }

  .grid-end-lg-6 {
    grid-column-end: 6;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-7 {
    grid-column-start: 7;
  }

  .grid-end-sm-7 {
    grid-column-end: 7;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-7 {
    grid-column-start: 7;
  }

  .grid-end-lg-7 {
    grid-column-end: 7;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-8 {
    grid-column-start: 8;
  }

  .grid-end-sm-8 {
    grid-column-end: 8;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-8 {
    grid-column-start: 8;
  }

  .grid-end-lg-8 {
    grid-column-end: 8;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-9 {
    grid-column-start: 9;
  }

  .grid-end-sm-9 {
    grid-column-end: 9;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-9 {
    grid-column-start: 9;
  }

  .grid-end-lg-9 {
    grid-column-end: 9;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-10 {
    grid-column-start: 10;
  }

  .grid-end-sm-10 {
    grid-column-end: 10;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-10 {
    grid-column-start: 10;
  }

  .grid-end-lg-10 {
    grid-column-end: 10;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-11 {
    grid-column-start: 11;
  }

  .grid-end-sm-11 {
    grid-column-end: 11;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-11 {
    grid-column-start: 11;
  }

  .grid-end-lg-11 {
    grid-column-end: 11;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-12 {
    grid-column-start: 12;
  }

  .grid-end-sm-12 {
    grid-column-end: 12;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-12 {
    grid-column-start: 12;
  }

  .grid-end-lg-12 {
    grid-column-end: 12;
    background: red;
  }
}
@media (min-width: 576px) {
  .grid-start-sm-13 {
    grid-column-start: 13;
  }

  .grid-end-sm-13 {
    grid-column-end: 13;
    background: blue;
  }
}
@media (min-width: 768px) {
  .grid-start-lg-13 {
    grid-column-start: 13;
  }

  .grid-end-lg-13 {
    grid-column-end: 13;
    background: red;
  }
}

settings.json

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