Generated by SassMeister.com.

SassMeister-input.sass

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

$grid__max-width    : 960px
$grid__col-number   : 12
$breakpoints        : (sm: 48em, md: 700px, lg: 1000px)

%col-generales
  flex: 0 0 auto
  padding: 0 0.5rem

@function ancho($num-cols : $grid__col-number)
  @return percentage(1/$num-cols)

@mixin col-generator
  @for $i from 1 through $grid__col-number
    &-#{$i}
      @extend %col-generales
      flex-basis: ancho()*$i
      max-width: ancho()*$i
      
    &-offset-#{$i}
      @extend %col-generales
      margin-left: ancho()*1

@mixin mq ($size)
  $value: map-get($breakpoints, $size)
  @if $value != null
    @media (min-width: $value)
      @content
  @else
    @warn "Error puto aprende a escribir"

/*Better FlexboxGrid by @mpalau 🦁*/

.container
  margin-left: auto
  margin-right: auto


.row
  display: flex
  flex: 0 1 auto
  flex-direction: column
  flex-wrap: wrap
  margin-right: -0.5rem
  margin-left: -0.5rem

.col-xs
  @include col-generator

SassMeister-output.css

@charset "UTF-8";
.col-xs-1, .col-xs-offset-1, .col-xs-2, .col-xs-offset-2, .col-xs-3, .col-xs-offset-3, .col-xs-4, .col-xs-offset-4, .col-xs-5, .col-xs-offset-5, .col-xs-6, .col-xs-offset-6, .col-xs-7, .col-xs-offset-7, .col-xs-8, .col-xs-offset-8, .col-xs-9, .col-xs-offset-9, .col-xs-10, .col-xs-offset-10, .col-xs-11, .col-xs-offset-11, .col-xs-12, .col-xs-offset-12 {
  flex: 0 0 auto;
  padding: 0 0.5rem;
}

/*Better FlexboxGrid by @mpalau 🦁 */
.container {
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.col-xs-1 {
  flex-basis: 8.33333%;
  max-width: 8.33333%;
}
.col-xs-offset-1 {
  margin-left: 8.33333%;
}
.col-xs-2 {
  flex-basis: 16.66667%;
  max-width: 16.66667%;
}
.col-xs-offset-2 {
  margin-left: 8.33333%;
}
.col-xs-3 {
  flex-basis: 25.0%;
  max-width: 25.0%;
}
.col-xs-offset-3 {
  margin-left: 8.33333%;
}
.col-xs-4 {
  flex-basis: 33.33333%;
  max-width: 33.33333%;
}
.col-xs-offset-4 {
  margin-left: 8.33333%;
}
.col-xs-5 {
  flex-basis: 41.66667%;
  max-width: 41.66667%;
}
.col-xs-offset-5 {
  margin-left: 8.33333%;
}
.col-xs-6 {
  flex-basis: 50.0%;
  max-width: 50.0%;
}
.col-xs-offset-6 {
  margin-left: 8.33333%;
}
.col-xs-7 {
  flex-basis: 58.33333%;
  max-width: 58.33333%;
}
.col-xs-offset-7 {
  margin-left: 8.33333%;
}
.col-xs-8 {
  flex-basis: 66.66667%;
  max-width: 66.66667%;
}
.col-xs-offset-8 {
  margin-left: 8.33333%;
}
.col-xs-9 {
  flex-basis: 75.0%;
  max-width: 75.0%;
}
.col-xs-offset-9 {
  margin-left: 8.33333%;
}
.col-xs-10 {
  flex-basis: 83.33333%;
  max-width: 83.33333%;
}
.col-xs-offset-10 {
  margin-left: 8.33333%;
}
.col-xs-11 {
  flex-basis: 91.66667%;
  max-width: 91.66667%;
}
.col-xs-offset-11 {
  margin-left: 8.33333%;
}
.col-xs-12 {
  flex-basis: 100.0%;
  max-width: 100.0%;
}
.col-xs-offset-12 {
  margin-left: 8.33333%;
}