Generated by SassMeister.com.

columns.css

.xs-1 {
  width: 25%;
}

.xs-2 {
  width: 50%;
}

.xs-3 {
  width: 75%;
}

.xs-4 {
  width: 100%;
}

columns.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$columns: 4;
      
$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);
                  .xs-#{$i}{
                              // @include colum-padding($gutter);
                              width: $width;
                  }
      }
}

@include col-list;