Generated by SassMeister.com.

SassMeister-input-HTML.jade

.block
  -(1..6).each do |i|
    .element #{i}
      | hello world

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// general design visuals, ignore for practical purposes.
.block
  background-color: orange

.element
  box-sizing: border-box
  padding: 1em
  border: 1px dashed gray
  background-color: white

// Place in Functions related dir
@function gutter-value($arg, $gutter)
  @if $gutter
    $value: 100 / $arg - 1 * 1%
  @else
    $value: 100 / $arg * 1%
  @return $value

// Place in mixins related dir
=flex-grid-container($wrap: null)
  display: flex
  flex-wrap: $wrap
  @if $wrap
    justify-content: space-between

=flex-grid-item($arg, $gutter: null, $margin: null)
  flex-basis: gutter-value($arg, $gutter)
  @if $margin != null
    margin-bottom: $margin
    &:nth-last-child(-n+#{$arg})
      margin-bottom: 0

// styles to be used in CSS
.block
  +flex-grid-container(wrap)

.element
  +flex-grid-item(2, true, 1em)

SassMeister-output.css

.block {
  background-color: orange; }

.element {
  box-sizing: border-box;
  padding: 1em;
  border: 1px dashed gray;
  background-color: white; }

.block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.element {
  flex-basis: 49%;
  margin-bottom: 1em; }
  .element:nth-last-child(-n+2) {
    margin-bottom: 0; }

SassMeister-rendered.html

<div class='block'>
  <div class='element'>1</div>
  <div class='element'>2</div>
  <div class='element'>3</div>
  <div class='element'>4</div>
  <div class='element'>5</div>
  <div class='element'>6</div>
</div>