Generated by SassMeister.com.

SassMeister-input-HTML.html

 <div class="workgroups-video">
  
  <ul>
    <li><span>Video 1</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
    <li><span>Video 4</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
    <li><span>Video 4</span></li>
    <li><span>Video 5</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
    <li><span>Video 4</span></li>
    <li><span>Video 5</span></li>
    <li><span>Video 6</span></li>
  </ul>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Reset
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  list-style: none outside none;
  vertical-align: baseline;
}

// Box-sizing
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

// Sass for video boxes
/* Styles for video Boxes */
$margin: 1%;

.workgroups-video {
  overflow: auto;
  max-width: 600px;
  margin: 0 auto;
  ul {
    width: 100%;
    display: inline-block;
    margin: 0 auto 1em;
    text-align: center;
  }
  li {
    float: left;
    margin-right: $margin;
    &:last-child, &:nth-of-type(4n+4) {
      margin: 0;
    }
  }
  @for $i from 1 through 16 {
	  li:first-child:nth-last-child(#{$i}),
	  li:first-child:nth-last-child(#{$i}) ~ li {
		  width: 100% / $i - (($margin * ($i - 1)) / $i);
		  min-width: 24.25%;
	  }
  }
  span {
    display: inline-block;
    overflow: auto;
    width: 100%;
  }
}
// ================================

/* Demo Code, don't ingest */
span { 
  min-height: 150px;
  background: lightgrey;
}

SassMeister-output.css

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  list-style: none outside none;
  vertical-align: baseline;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Styles for video Boxes */
.workgroups-video {
  overflow: auto;
  max-width: 600px;
  margin: 0 auto;
}
.workgroups-video ul {
  width: 100%;
  display: inline-block;
  margin: 0 auto 1em;
  text-align: center;
}
.workgroups-video li {
  float: left;
  margin-right: 1%;
}
.workgroups-video li:last-child, .workgroups-video li:nth-of-type(4n+4) {
  margin: 0;
}
.workgroups-video li:first-child:nth-last-child(1),
.workgroups-video li:first-child:nth-last-child(1) ~ li {
  width: 100%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(2),
.workgroups-video li:first-child:nth-last-child(2) ~ li {
  width: 49.5%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(3),
.workgroups-video li:first-child:nth-last-child(3) ~ li {
  width: 32.66667%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(4),
.workgroups-video li:first-child:nth-last-child(4) ~ li {
  width: 24.25%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(5),
.workgroups-video li:first-child:nth-last-child(5) ~ li {
  width: 19.2%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(6),
.workgroups-video li:first-child:nth-last-child(6) ~ li {
  width: 15.83333%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(7),
.workgroups-video li:first-child:nth-last-child(7) ~ li {
  width: 13.42857%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(8),
.workgroups-video li:first-child:nth-last-child(8) ~ li {
  width: 11.625%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(9),
.workgroups-video li:first-child:nth-last-child(9) ~ li {
  width: 10.22222%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(10),
.workgroups-video li:first-child:nth-last-child(10) ~ li {
  width: 9.1%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(11),
.workgroups-video li:first-child:nth-last-child(11) ~ li {
  width: 8.18182%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(12),
.workgroups-video li:first-child:nth-last-child(12) ~ li {
  width: 7.41667%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(13),
.workgroups-video li:first-child:nth-last-child(13) ~ li {
  width: 6.76923%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(14),
.workgroups-video li:first-child:nth-last-child(14) ~ li {
  width: 6.21429%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(15),
.workgroups-video li:first-child:nth-last-child(15) ~ li {
  width: 5.73333%;
  min-width: 24.25%;
}
.workgroups-video li:first-child:nth-last-child(16),
.workgroups-video li:first-child:nth-last-child(16) ~ li {
  width: 5.3125%;
  min-width: 24.25%;
}
.workgroups-video span {
  display: inline-block;
  overflow: auto;
  width: 100%;
}

/* Demo Code, don't ingest */
span {
  min-height: 150px;
  background: lightgrey;
}

SassMeister-rendered.html

 <div class="workgroups-video">
  
  <ul>
    <li><span>Video 1</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
    <li><span>Video 4</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
    <li><span>Video 4</span></li>
    <li><span>Video 5</span></li>
  </ul>
  <ul>
    <li><span>Video 1</span></li>
    <li><span>Video 2</span></li>
    <li><span>Video 3</span></li>
    <li><span>Video 4</span></li>
    <li><span>Video 5</span></li>
    <li><span>Video 6</span></li>
  </ul>
</div>