Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="list-one">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<br>
<br>
<br>

<ul class="another-list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

* {
  box-sizing: border-box;
}

$columns: 4;

// Meh, okay
@for $i from 1 through $columns {
  .span-#{$i} {
      width: ((100 / $columns) * $i) * 1%;
  }
}

// Better 
// (placeholder to extend parent):
@for $i from 1 through $columns {
  %cols-#{$i}-#{$columns} {
    li {
      width: ((100 / $columns) * $i) * 1%;
    }
  }
}

.list-one{
  @extend %cols-1-4;
  margin: 0;
  padding: 0;
  
  li {
    height: 30px;
    background: black;
    display: inline-block;
    list-style: none;
    float: left;
    outline: 1px solid hotpink;
  }
}

// even better
// (placeholder to extend element)

// Better (placeholder selector):
@for $i from 1 through $columns {
  %cols-#{$i}of#{$columns} {
      width: ((100 / $columns) * $i) * 1%;
  }
}

.list-item {
  @extend %cols-2of4;
  height: 30px;
  background: green;
  float: left;
  outline: 1px solid;
  padding: 10px;
  list-style: none;
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.span-1 {
  width: 25%;
}

.span-2 {
  width: 50%;
}

.span-3 {
  width: 75%;
}

.span-4 {
  width: 100%;
}

.list-one li {
  width: 25%;
}

.list-one {
  margin: 0;
  padding: 0;
}
.list-one li {
  height: 30px;
  background: black;
  display: inline-block;
  list-style: none;
  float: left;
  outline: 1px solid hotpink;
}

.list-item {
  width: 50%;
}

.list-item {
  height: 30px;
  background: green;
  float: left;
  outline: 1px solid;
  padding: 10px;
  list-style: none;
}

SassMeister-rendered.html

<ul class="list-one">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<br>
<br>
<br>

<ul class="another-list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>