Generated by SassMeister.com.

SassMeister-input-HTML.jade

.block
  - var n = 0
  while n < 25
    .element= n++

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
  @if $wrap
    flex-wrap: $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

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

.element
  +flex-grid-item(4, 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: 24%;
  margin-bottom: 1em;
}

SassMeister-rendered.html

<div class="block">
  <div class="element">0</div>
  <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 class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
  <div class="element">10</div>
  <div class="element">11</div>
  <div class="element">12</div>
  <div class="element">13</div>
  <div class="element">14</div>
  <div class="element">15</div>
  <div class="element">16</div>
  <div class="element">17</div>
  <div class="element">18</div>
  <div class="element">19</div>
  <div class="element">20</div>
  <div class="element">21</div>
  <div class="element">22</div>
  <div class="element">23</div>
  <div class="element">24</div>
</div>