Generated by SassMeister.com.

input.scss

.foo {
    @for $i from 1 through 24 {
        &--size-#{$i} {
          grid-column: #{(24 - $i) / 2} / span #{$i};
          grid-row: #{(24 - $i) / 2} / span #{$i};
        }
    }
}

output.css

.foo--size-1 {
  grid-column: 11.5 / span 1;
  grid-row: 11.5 / span 1;
}
.foo--size-2 {
  grid-column: 11 / span 2;
  grid-row: 11 / span 2;
}
.foo--size-3 {
  grid-column: 10.5 / span 3;
  grid-row: 10.5 / span 3;
}
.foo--size-4 {
  grid-column: 10 / span 4;
  grid-row: 10 / span 4;
}
.foo--size-5 {
  grid-column: 9.5 / span 5;
  grid-row: 9.5 / span 5;
}
.foo--size-6 {
  grid-column: 9 / span 6;
  grid-row: 9 / span 6;
}
.foo--size-7 {
  grid-column: 8.5 / span 7;
  grid-row: 8.5 / span 7;
}
.foo--size-8 {
  grid-column: 8 / span 8;
  grid-row: 8 / span 8;
}
.foo--size-9 {
  grid-column: 7.5 / span 9;
  grid-row: 7.5 / span 9;
}
.foo--size-10 {
  grid-column: 7 / span 10;
  grid-row: 7 / span 10;
}
.foo--size-11 {
  grid-column: 6.5 / span 11;
  grid-row: 6.5 / span 11;
}
.foo--size-12 {
  grid-column: 6 / span 12;
  grid-row: 6 / span 12;
}
.foo--size-13 {
  grid-column: 5.5 / span 13;
  grid-row: 5.5 / span 13;
}
.foo--size-14 {
  grid-column: 5 / span 14;
  grid-row: 5 / span 14;
}
.foo--size-15 {
  grid-column: 4.5 / span 15;
  grid-row: 4.5 / span 15;
}
.foo--size-16 {
  grid-column: 4 / span 16;
  grid-row: 4 / span 16;
}
.foo--size-17 {
  grid-column: 3.5 / span 17;
  grid-row: 3.5 / span 17;
}
.foo--size-18 {
  grid-column: 3 / span 18;
  grid-row: 3 / span 18;
}
.foo--size-19 {
  grid-column: 2.5 / span 19;
  grid-row: 2.5 / span 19;
}
.foo--size-20 {
  grid-column: 2 / span 20;
  grid-row: 2 / span 20;
}
.foo--size-21 {
  grid-column: 1.5 / span 21;
  grid-row: 1.5 / span 21;
}
.foo--size-22 {
  grid-column: 1 / span 22;
  grid-row: 1 / span 22;
}
.foo--size-23 {
  grid-column: 0.5 / span 23;
  grid-row: 0.5 / span 23;
}
.foo--size-24 {
  grid-column: 0 / span 24;
  grid-row: 0 / span 24;
}

settings.json

{
  "sass": {
    "compiler": "Ruby Sass/3.7.4",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}