Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="List--from-left List--space-before">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

<ul class="List--from-left List--space-after">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

<ul class="List--from-right List--space-before">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

<ul class="List--from-right List--space-after">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

SassMeister-input.scss

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

// Reset

ul, li {
 margin: 0;
 padding: 0;
 list-style: none;
}

ul {
  margin-bottom: 20px;
  clear: both;
  float: left;
}

li {
  padding: 20px;
  background: grey;
  font: sans-serif;
  text-transform: uppercase;
  width: 100px;
}


@mixin floated-list($start-from:left, $spacing:0, $child:li, $spacing-position:before) {
    
  // Test for accepted values
  @if not index(left right, $start-from) {
    @error "`#{$start-from}` is not a supported value for `$start-from`. Must be either `left` or `right`";
  }
  
  @if not index(before after, $spacing-position) {
    @error "`#{$spacing-position}` is not a supported value for `$spacing-position`. Must be either `before` or `after`";
  }
  
  $margin-direction: null;
  $child-cancel-position: null;
  
  @if(($start-from == left and $spacing-position == after) or ($start-from == right and $spacing-position == before)) {
    $margin-direction: right;
  } @else {
    $margin-direction: left;
  }
  
   @if(($start-from == left and $spacing-position == after) or ($start-from == right and $spacing-position == after)) {
    $child-cancel-position: last-child;
  } @else {
    $child-cancel-position: first-child;
  }
  
  #{$child} {
    float: $start-from;
    margin-#{$margin-direction}: #{$spacing};
    @content;
    
    &:#{$child-cancel-position} {
      margin-#{$margin-direction}: 0;
    }
  }
}

.List--from-left.List--space-before {
   @include floated-list(left, 20px, 'li', before) {
    color: white;
  }
}

.List--from-left.List--space-after {
   @include floated-list(left, 20px, 'li', after) {
    color: white;
  }
}

.List--from-right.List--space-before {
   @include floated-list(right, 20px, 'li', before) {
    color: white;
  }
}

.List--from-right.List--space-after {
   @include floated-list(right, 20px, 'li', after) {
    color: white;
  }
}

SassMeister-output.css

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  margin-bottom: 20px;
  clear: both;
  float: left;
}

li {
  padding: 20px;
  background: grey;
  font: sans-serif;
  text-transform: uppercase;
  width: 100px;
}

.List--from-left.List--space-before li {
  float: left;
  margin-left: 20px;
  color: white;
}
.List--from-left.List--space-before li:first-child {
  margin-left: 0;
}

.List--from-left.List--space-after li {
  float: left;
  margin-right: 20px;
  color: white;
}
.List--from-left.List--space-after li:last-child {
  margin-right: 0;
}

.List--from-right.List--space-before li {
  float: right;
  margin-right: 20px;
  color: white;
}
.List--from-right.List--space-before li:first-child {
  margin-right: 0;
}

.List--from-right.List--space-after li {
  float: right;
  margin-left: 20px;
  color: white;
}
.List--from-right.List--space-after li:last-child {
  margin-left: 0;
}

SassMeister-rendered.html

<ul class="List--from-left List--space-before">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

<ul class="List--from-left List--space-after">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

<ul class="List--from-right List--space-before">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>

<ul class="List--from-right List--space-after">
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Delta</li>
</ul>