$resputil-breakpoints: (
    sm: 640px,
    md: 760px,
    lg: 1024px,
) !default;

@mixin resputil($name, $breakpoints: $resputil-breakpoints) {
    .#{$name} {
        @content;
    }
    
    @each $bp-name, $bp-value in $breakpoints {
        
        .#{$bp-name}\:#{$name} {
            @media (min-width: $bp-value) {
                @content;
            }
        }
    }
}

@function grid-width($col, $count) {

    @if $col == $count {
        @return 100%;
    } @else {
        $precision: 10000;
        @return round(100% / $count * $precision) / $precision * $col;
    }
}

@for $count from 2 through 6 {
    @for $index from 1 through $count {
        @include resputil("col#{$index}of#{$count}") {
            width: grid-width($index, $count);
        }
    }
}