how to use cal () with sass in loop @for

I need to generate with sass, for each of the created classes, a flex: 0 0 calc(numeroGrid% - 30px) . I have the following code:

@mixin grid-generator($size) {
  @for $i from 1 through 12 {
    .col-#{$size}-#{$i} {
     flex: 0 0 percentage($i / 12);
    }
  }
}
@mixin respond-from($media) {
  @if $media == xs {
    @media (min-width: 0px)  { @content; }
  } @else if $media == sm {
    @media (min-width: 768px) { @content; }
  } @else if $media == md {
    @media (min-width: 1200) { @content; }
  } @else if $media == lg {
    @media (min-width: 1440) { @content; }
  } @else if $media == xl {
    @media (min-width: 1800) { @content; }
  }
}
@include grid-generator(xs);

@include respond-from(sm) {
  @include grid-generator(sm);
}

@include respond-from(md) {
    @include grid-generator(md);
}

@include respond-from(lg) {
    @include grid-generator(lg);
}

@include respond-from(xl) {
    @include grid-generator(xl);
}

Which successfully replicates my own grids system, but I do not know how to create the calc , for example .col-sm-4{flex: 0 0 calc(33.3333% - 30px)}