Automate CSS grid utility classes

grid.scss

.container.grid {
    max-width: 1600px;
    margin: auto;
    grid-row-gap: var(--gutter)
}

[class*="grid"] {
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(12, 1fr);
    grid-row-gap: 0;
}

@mixin breakpoint($point) {
    @if $point==xxs {
        @media (max-width: 320px) {
            @content ;
        }
    }
    @if $point==xs {
        @media (max-width: 420px) {
            @content ;
        }
    }
    @else if $point==sm {
        @media (min-width: 421px) and (max-width:768px) {
            @content ;
        }
    }
    @else if $point==md {
        @media (min-width: 769px) and (max-width:1024px) {
            @content ;
        }
    }
    @else if $point==lg {
        @media (min-width: 1025px) {
            @content ;
        }
    }
    @else if $point==xl {
        @media (min-width: 1400px) {
            @content ;
        }
    }
    // Mobile / Tablet portrait
    @else if $point==xs-sm {
        @media (max-width: 768px) {
            @content ;
        }
    }
    // Mobile / Tablet landscape
    @else if $point==xs-md {
        @media (max-width: 1024px) {
            @content ;
        }
    }
    // Tablet portrait / Tablet landscape
    @else if $point==sm-md {
        @media (min-width: 421px) and (max-width:1024px) {
            @content ;
        }
    }
    // Tablet landscape / All
    @else if $point==sm-xl {
        @media (min-width: 768px) {
            @content ;
        }
    }
    // Tablet landscape / All
    @else if $point==md-xl {
        @media (min-width: 1024px) {
            @content ;
        }
    }
    // Dekstop / All
    @else if $point==lg-xl {
        @media (min-width: 1025px) {
            @content ;
        }
    }

}

$sizes: xxs, xs, md, lg, xl, xs-sm, xs-md, sm-md, sm-xl, md-xl, lg-xl;

@each $size in $sizes {
  .#{$size} {
    @include breakpoint(#{$size}) {
    $span: 0;
    @while $span < 12 {
        $span: $span + 1;
        &\:span_#{$span} {
            grid-column: span #{$span};
        }
    }
  }
}
}