Generated by SassMeister.com.

SassMeister-input-HTML.haml

%h3 floatblock
.floatblock
  // -(1..21).each do |i|
  .floatelement 
    .floatcontent 1 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 2 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 3 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 4 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 5 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 6 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 7 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .floatelement 
    .floatcontent 8 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 



%h3 flexblock
.flexblock
  // -(1..21).each do |i|
  .element 
    .content 1 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 2 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 3 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 4 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 5 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 6 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 7 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 
  .element 
    .content 8 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* 

SassMeister-input.sass

// ----
// libsass (v3.2.4)
// ----

// general design visuals, ignore for practical purposes.
.flexblock, .floatblock
  background-color: orange
  box-sizing: border-box

.element, .floatelement
  box-sizing: border-box
  // padding: 1em
  border: 1px dashed red
  // background-color: #ddd

.content, .floatcontent
  background-color: #ddd

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

=flex-grid-item($arg, $gutter: null, $padding: null)
  flex-basis: 100 / $arg * 1%
  @if $padding != null
    padding-left: $padding / 2
    padding-right: $padding / 2
    margin-bottom: $padding
    
    // select first of each row
    &:nth-child(#{$arg}n+1)
      padding-left: 0
  
    // select last of each row
    &:nth-child(#{$arg}n)
      padding-right: 0
    
    // select last row


    // &:nth-last-child(-n+#{$arg})
    //   margin-bottom: 0

// styles to be used in CSS
h3
  clear: both
.flexblock
  +flex-grid-container(wrap)
.element
  +flex-grid-item(4, true, 1em)
  
=float-container($arg, $padding: null)
  // flex-basis: gutter-value($arg, $gutter)
  // display: inline-block
  float: left
  width: 100% / $arg
  padding-left: $padding / 2
  padding-right: $padding / 2
  margin-bottom: $padding
  // select first of each row
  &:nth-child(#{$arg}n+1)
    // clear floating for new row
    clear: both
    padding-left: 0
  // select last of each row
  &:nth-child(#{$arg}n)
    padding-right: 0


.floatblock
  background-color: lime
  overflow: hidden
.floatelement 
  +float-container(5, 1em)

SassMeister-output.css

.flexblock, .floatblock {
  background-color: orange;
  box-sizing: border-box;
}

.element, .floatelement {
  box-sizing: border-box;
  border: 1px dashed red;
}

.content, .floatcontent {
  background-color: #ddd;
}

h3 {
  clear: both;
}

.flexblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.element {
  flex-basis: 25%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-bottom: 1em;
}

.element:nth-child(4n+1) {
  padding-left: 0;
}

.element:nth-child(4n) {
  padding-right: 0;
}

.floatblock {
  background-color: lime;
  overflow: hidden;
}

.floatelement {
  float: left;
  width: 20%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-bottom: 1em;
}

.floatelement:nth-child(5n+1) {
  clear: both;
  padding-left: 0;
}

.floatelement:nth-child(5n) {
  padding-right: 0;
}

SassMeister-rendered.html

<h3>floatblock</h3>
<div class='floatblock'>
  <!-- / -(1..21).each do |i| -->
  <div class='floatelement'>
    <div class='floatcontent'>1 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>2 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>3 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>4 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>5 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>6 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>7 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='floatelement'>
    <div class='floatcontent'>8 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
</div>
<h3>flexblock</h3>
<div class='flexblock'>
  <!-- / -(1..21).each do |i| -->
  <div class='element'>
    <div class='content'>1 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>2 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>3 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>4 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>5 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>6 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*  Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>7 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
  <div class='element'>
    <div class='content'>8 Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.* Cupcake ipsum dolor. Sit amet I love bonbon* bear claw tootsie roll jelly.*</div>
  </div>
</div>