Generated by SassMeister.com.

SassMeister-input-HTML.jade

.row
  .offset-md-4.col-md-3
    h1 Hola amigos
  .col-md-4
    p Inspirado por <a href="http://www.flexboxgrid.com/" target="_blank">Flexbox Grid</a>

.row
  .col-md-2
    img(src="http://www.fillmurray.com/300/300")
  .col-md-8
    p Four dollar toast slow-carb crucifix chillwave listicle semiotics. Tilde fap celiac asymmetrical aesthetic. Mlkshk franzen salvia, twee lo-fi vegan plaid listicle seitan gentrify typewriter. Truffaut kickstarter shoreditch roof party. +1 freegan hella pitchfork sriracha cliche. Blog health goth synth, yuccie franzen 8-bit dreamcatcher pickled keytar fingerstache actually. Stumptown YOLO tousled VHS pug cronut, fap roof party cliche fingerstache.
      | YOLO iPhone tilde, tofu jean shorts butcher skateboard fanny pack organic locavore chicharrones. Kombucha austin gastropub, franzen taxidermy butcher yuccie. Lo-fi retro occupy, wolf irony trust fund schlitz godard cornhole venmo shoreditch pop-up. Brooklyn messenger bag chartreuse street art, brunch cray aesthetic kickstarter tacos lomo. Chia craft beer asymmetrical, salvia twee cornhole street art before they sold out. Food truck crucifix blog forage, cornhole etsy pickled beard small batch kombucha paleo shabby chic tumblr vegan. Wayfarers single-origin coffee cray pour-over, you probably haven't heard of them XOXO PBR&B.
      | Ramps cronut pork belly viral freegan DIY. 90's pinterest poutine wayfarers. Gastropub salvia pork belly, ugh poutine gluten-free artisan tumblr keytar waistcoat microdosing organic. Fingerstache freegan drinking vinegar, ugh artisan normcore farm-to-table trust fund street art ramps wolf DIY. Synth bushwick shoreditch, pabst chicharrones art party kitsch direct trade. Vice austin selvage, gluten-free umami freegan tofu gentrify fanny pack DIY kickstarter chia 8-bit schlitz polaroid. Whatever banh mi freegan XOXO, tousled roof party single-origin coffee crucifix hella williamsburg chambray pug.
      |DIY occupy put a bird on it small batch, hashtag vice flexitarian. Listicle hammock ennui, roof party fap hella keytar locavore slow-carb stumptown lo-fi salvia neutra master cleanse. Poutine semiotics chartreuse mlkshk. Drinking vinegar kogi asymmetrical mlkshk pabst lumbersexual cred semiotics, meh beard. Fanny pack meditation typewriter cronut, bitters green juice intelligentsia mlkshk pabst lomo chartreuse wayfarers gluten-free art party 90's. Sustainable polaroid 8-bit whatever mustache, tousled distillery wayfarers gentrify PBR&B +1 freegan organic. Hashtag bespoke chambray, meditation squid VHS taxidermy ennui.
  

SassMeister-input.sass

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

/* *****************************************************************
/* Better Flexbox Grid by @mpalau 🦁                                
/* Inspirado en Flexboxgrid.com pero con .sass para belleza         
/* No modifiques nada acá si quieres moverle vete al archivo sass ;)
/* *****************************************************************
// Configuración 👓
$col-num: 12 !default
$col-gutter: 0.5rem !default

// Breakpoints para los media queries 🐶
$grid__breakpoints: xs, (sm, 32em), (md, 48em), (lg, 62em) !default

// Empezamos a talacharle 🎓
// Primero vamos a sacar el porcentaje que debe ocupar cada columna basado en la configuración
// Ej. para 12 columnas 1 es 8.333333% etc
@function col-porcent($num-columna)
  @return ($num-columna / $col-num) * 100%


// Este mixin nos ayuda a meterle el gutter (espaciado) que queremos a nuestras columnas o mueble
// Se asume que buscas meterle padding para el colchón y con horientación horizontal
@mixin gutter($gutter, $tipo: padding, $orientacion: horizontal)
  @if $orientacion == horizontal
    #{ $tipo  }-left    : $gutter
    #{ $tipo  }-right   : $gutter
  @else if $orientacion == vertical
    #{ $tipo  }-top     : $gutter
    #{ $tipo  }-bottom  : $gutter
  @else
    @error " 😩 Lo siento pero '#{$orientacion}' no es algo correcto. Puedes elegir horizontal o vertical"

// Ahora vamos a hacer las cuestiones generales haciendo uso de las expansiones %yeh 😘
// Pongo el row acá aunque no tenga que ver para que salga primero en lo compilado
.row
  display             : flex 
  flex-direction      : row
  flex-wrap           : wrap
  align-items         : center
  +gutter($col-gutter, margin)


%col
  flex                  : 0 0 auto
  flex-direction        : column
  flex-grow             : 0
  flex-shrink           : 0
  +gutter($col-gutter)

%col-flex
  @extend %col
  flex-grow             : 1
  flex-basis            : 0
  max-width             : 100%
  
// Vamos a generar las columnas
// col-[breakpoint] para los distintos puntos de nuestro media query donde van a aplicar
// Entonces la idea es col-[breakpoint]-[col-num] para las distintas columnas (A la bootstrap) default es 12
// Incluso offset-[breakpoing]-[col-num] para hacer un offset igual a la bootstrap default es 11

// Este mixin genera todos los ajustes que comparten de manera global todas las columnas
@mixin grid-base ($breakpoint)
  .col-#{ $breakpoint }
    @extend %col-flex
  
  @for $i from 1 through $col-num
    .col-#{ $breakpoint }-#{ $i }
      @extend %col

// Y este otro genera lo que cada columna tiene de manera individual y particular como su ancho
@mixin grid-sizes ($breakpoint)
  // Este loop genera los anchos
  @for $i from 1 through $col-num
    .col-#{ $breakpoint }-#{ $i }
      flex-basis        : col-porcent($i)
      max-width         : col-porcent($i)
  // Y este otro genera los offsets
  @for $i from 1 through $col-num
    // Pero no queremos incluir la ultima porque ni modos que offset de 1 fila entera lol
    @if ($i != $col-num)
      .offset-#{ $breakpoint }-#{ $i }
        margin-left     : col-porcent($i)
        


// Ahora si viene lo que siempre qusiste perrín, vamos a crear todo bang bang
// Falta: pensar container
// Falta: pensar mobile first??
  
// Ahora vamos a hacer uso de nuestro mixin para todas las cuestiones generales
@each $val in $grid__breakpoints
  $breakpoint : nth($val, 1)
  +grid-base($breakpoint)

// Ahora toca el mixin de grid sizes
@each $val in $grid__breakpoints
  // Esto primero avienta las columnas xs (o las primeras) que van sin media query para el mobile first
  @if length($val) == 1
    $breakpoint : nth($val, 1)
    +grid-sizes($breakpoint)
  @else
    // Y ahora si entran las demás basadas en nuestro grid
    $breakpoint       : nth($val, 1)
    $breakpoint__size : nth($val, 2)
    @media only screen and (min-width: #{ $breakpoint__size })
      +grid-sizes($breakpoint)

SassMeister-output.css

@charset "UTF-8";
/* ***************************************************************** */
/* Better Flexbox Grid by @mpalau 🦁                                 */
/* Inspirado en Flexboxgrid.com pero con .sass para belleza          */
/* No modifiques nada acá si quieres moverle vete al archivo sass ;) */
/* ***************************************************************** */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.col-xs, .col-sm, .col-md, .col-lg, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  flex: 0 0 auto;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.col-xs, .col-sm, .col-md, .col-lg {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  flex-basis: 8.33333%;
  max-width: 8.33333%;
}

.col-xs-2 {
  flex-basis: 16.66667%;
  max-width: 16.66667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.col-xs-5 {
  flex-basis: 41.66667%;
  max-width: 41.66667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.33333%;
  max-width: 58.33333%;
}

.col-xs-8 {
  flex-basis: 66.66667%;
  max-width: 66.66667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.33333%;
  max-width: 83.33333%;
}

.col-xs-11 {
  flex-basis: 91.66667%;
  max-width: 91.66667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.offset-xs-1 {
  margin-left: 8.33333%;
}

.offset-xs-2 {
  margin-left: 16.66667%;
}

.offset-xs-3 {
  margin-left: 25%;
}

.offset-xs-4 {
  margin-left: 33.33333%;
}

.offset-xs-5 {
  margin-left: 41.66667%;
}

.offset-xs-6 {
  margin-left: 50%;
}

.offset-xs-7 {
  margin-left: 58.33333%;
}

.offset-xs-8 {
  margin-left: 66.66667%;
}

.offset-xs-9 {
  margin-left: 75%;
}

.offset-xs-10 {
  margin-left: 83.33333%;
}

.offset-xs-11 {
  margin-left: 91.66667%;
}

@media only screen and (min-width: 32em) {
  .col-sm-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .col-sm-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .col-sm-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .col-sm-8 {
    flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .col-sm-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .offset-sm-1 {
    margin-left: 8.33333%;
  }

  .offset-sm-2 {
    margin-left: 16.66667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.33333%;
  }

  .offset-sm-5 {
    margin-left: 41.66667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.33333%;
  }

  .offset-sm-8 {
    margin-left: 66.66667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.33333%;
  }

  .offset-sm-11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 48em) {
  .col-md-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .col-md-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .col-md-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .col-md-8 {
    flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .col-md-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .offset-md-1 {
    margin-left: 8.33333%;
  }

  .offset-md-2 {
    margin-left: 16.66667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.33333%;
  }

  .offset-md-5 {
    margin-left: 41.66667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.33333%;
  }

  .offset-md-8 {
    margin-left: 66.66667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.33333%;
  }

  .offset-md-11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 62em) {
  .col-lg-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .col-lg-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .col-lg-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .col-lg-8 {
    flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .col-lg-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .offset-lg-1 {
    margin-left: 8.33333%;
  }

  .offset-lg-2 {
    margin-left: 16.66667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.33333%;
  }

  .offset-lg-5 {
    margin-left: 41.66667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.33333%;
  }

  .offset-lg-8 {
    margin-left: 66.66667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.33333%;
  }

  .offset-lg-11 {
    margin-left: 91.66667%;
  }
}

SassMeister-rendered.html

<div class="row">
  <div class="offset-md-4 col-md-3">
    <h1>Hola amigos</h1>
  </div>
  <div class="col-md-4">
    <p>Inspirado por <a href="http://www.flexboxgrid.com/" target="_blank">Flexbox Grid</a></p>
  </div>
</div>
<div class="row">
  <div class="col-md-2"><img src="http://www.fillmurray.com/300/300"/></div>
  <div class="col-md-8">
    <p>
      Four dollar toast slow-carb crucifix chillwave listicle semiotics. Tilde fap celiac asymmetrical aesthetic. Mlkshk franzen salvia, twee lo-fi vegan plaid listicle seitan gentrify typewriter. Truffaut kickstarter shoreditch roof party. +1 freegan hella pitchfork sriracha cliche. Blog health goth synth, yuccie franzen 8-bit dreamcatcher pickled keytar fingerstache actually. Stumptown YOLO tousled VHS pug cronut, fap roof party cliche fingerstache.
      YOLO iPhone tilde, tofu jean shorts butcher skateboard fanny pack organic locavore chicharrones. Kombucha austin gastropub, franzen taxidermy butcher yuccie. Lo-fi retro occupy, wolf irony trust fund schlitz godard cornhole venmo shoreditch pop-up. Brooklyn messenger bag chartreuse street art, brunch cray aesthetic kickstarter tacos lomo. Chia craft beer asymmetrical, salvia twee cornhole street art before they sold out. Food truck crucifix blog forage, cornhole etsy pickled beard small batch kombucha paleo shabby chic tumblr vegan. Wayfarers single-origin coffee cray pour-over, you probably haven't heard of them XOXO PBR&B.
      Ramps cronut pork belly viral freegan DIY. 90's pinterest poutine wayfarers. Gastropub salvia pork belly, ugh poutine gluten-free artisan tumblr keytar waistcoat microdosing organic. Fingerstache freegan drinking vinegar, ugh artisan normcore farm-to-table trust fund street art ramps wolf DIY. Synth bushwick shoreditch, pabst chicharrones art party kitsch direct trade. Vice austin selvage, gluten-free umami freegan tofu gentrify fanny pack DIY kickstarter chia 8-bit schlitz polaroid. Whatever banh mi freegan XOXO, tousled roof party single-origin coffee crucifix hella williamsburg chambray pug.
      DIY occupy put a bird on it small batch, hashtag vice flexitarian. Listicle hammock ennui, roof party fap hella keytar locavore slow-carb stumptown lo-fi salvia neutra master cleanse. Poutine semiotics chartreuse mlkshk. Drinking vinegar kogi asymmetrical mlkshk pabst lumbersexual cred semiotics, meh beard. Fanny pack meditation typewriter cronut, bitters green juice intelligentsia mlkshk pabst lomo chartreuse wayfarers gluten-free art party 90's. Sustainable polaroid 8-bit whatever mustache, tousled distillery wayfarers gentrify PBR&B +1 freegan organic. Hashtag bespoke chambray, meditation squid VHS taxidermy ennui.
    </p>
  </div>
</div>