Not calculating i+1

[djmtype]

Why doesn't this work?

@for $i from 1 to 12 {
  .col-$(i) { --span: $i; }
  .col-start-$(i) { grid-column-start: $i; }
  .col-end-$(i+1) { grid-column-end: $(i+1); }
}

All of the .col-start-* output correctly, but the .col-end-* do not.
All instances render as .col-end-$(i+1) { grid-column-end: $(i+1); }