Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "bourbon/bourbon";
@import "neat/neat";
$mobile: new-breakpoint(min-width 480px 12);
$tablet: new-breakpoint(min-width 800px 12);
$laptop: new-breakpoint(min-width 960px 12);
$desktop:new-breakpoint(min-width 1200px 12);


// ------------------------------------------------------------
// Omega Reset
// ------------------------------------------------------------

@mixin omega-reset($nth) {
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}
li{
  list-style-type: none;
  height: 40px;
  background-color: #369;
  margin-bottom: 20px;
  @include clearfix;
   @include media($mobile){
  @include span-columns(6);
  @include omega(2n);
  }
  @include media($laptop){
    @include omega-reset(2n);
 @include span-columns(4);
  @include omega(3n);
  }
  @include media($desktop){
    @include omega-reset(3n);

  @include span-columns(3);
  @include omega(4n);
  }
  
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

li {
  list-style-type: none;
  height: 40px;
  background-color: #369;
  margin-bottom: 20px;
}

li::after {
  clear: both;
  content: "";
  display: table;
}

@media screen and (min-width: 480px) {
  li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  li:last-child {
    margin-right: 0;
  }
  li:nth-child(2n) {
    margin-right: 0;
  }
  li:nth-child(2n+1) {
    clear: left;
  }
}

@media screen and (min-width: 960px) {
  li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  li:nth-child(2n) {
    margin-right: 2.35765%;
  }
  li:nth-child(2n+1) {
    clear: none;
  }
  li:last-child {
    margin-right: 0;
  }
  li:nth-child(3n) {
    margin-right: 0;
  }
  li:nth-child(3n+1) {
    clear: left;
  }
}

@media screen and (min-width: 1200px) {
  li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  li:nth-child(3n) {
    margin-right: 2.35765%;
  }
  li:nth-child(3n+1) {
    clear: none;
  }
  li:last-child {
    margin-right: 0;
  }
  li:nth-child(4n) {
    margin-right: 0;
  }
  li:nth-child(4n+1) {
    clear: left;
  }
}

SassMeister-rendered.html

<div class="container">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>