Generated by SassMeister.com.

input.scss

$columns: 12;
      
$breakpoints: (
  small : 480px,
  medium: 640px,
  large : 1024px
);

$gutter: (
  null  : 10px,
  small : 20px,
  medium: 30px,
  large : 50px
);

@mixin colum-padding($fs-map, $fs-breakpoints: $breakpoints) {
  @each $fs-breakpoint, $gutter in $fs-map {
    @if $fs-breakpoint == null {
      padding: $gutter;
    }
    @else {
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }
      @media screen and (min-width: $fs-breakpoint) {
        padding: $gutter;
      }
    }
  }
}

@mixin col-list {
      @for $i from 1 through $columns {
            $width: 100% / ($columns / $i);
                  .col-#{$i}-12{
                              // @include colum-padding($gutter);
                              width: $width;
                  }
      }
}

@include col-list;

output.css

.col-1-12 {
  width: 8.33333%;
}

.col-2-12 {
  width: 16.66667%;
}

.col-3-12 {
  width: 25%;
}

.col-4-12 {
  width: 33.33333%;
}

.col-5-12 {
  width: 41.66667%;
}

.col-6-12 {
  width: 50%;
}

.col-7-12 {
  width: 58.33333%;
}

.col-8-12 {
  width: 66.66667%;
}

.col-9-12 {
  width: 75%;
}

.col-10-12 {
  width: 83.33333%;
}

.col-11-12 {
  width: 91.66667%;
}

.col-12-12 {
  width: 100%;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}