Generated by SassMeister.com.

SassMeister-input-HTML.haml

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

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

// 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
@mixin flex-grid-container($wrap: null) {
  display: flex;
  flex-wrap: $wrap;
  @if $wrap {
    justify-content: space-between;
  }
}

@mixin 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 {
  @include flex-grid-container(wrap);
}

.element {
    @include 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>