floated-list mixin

floated-list.scss

////
/// @group tools
/// @author Pedr Browne
/// @access public
////

/// Create a floated list, clearfixing the container, floating children and
/// setting spacing between them.
///
/// @param {String} $start-from
///   [left] Should the list be ordered from left to right or right to left?
///   Value must be either `left` or `right`.
///
/// @param {Number} $spacing [0]
///   The spacing between each item in the list.
///
/// @param {String} $spacing-position [before]
///   Should any spacing be added using a margin before or after each list item?
///   Value must be either `before` or `after`. *Note that the side will be
///   relative to the direction of the list.*
///
/// @param {String} $child [li]
///   The selector used to target the list items.
///
/// @content The properties of the list item(s).
///
/// @output Styles for both the list and its child list items
///
/// @throw `$app-invalid-value-error`
///
/// @example
///   @include floated-list(right, 20px, after, '.Example-li') {
///     color: $color--black;
///   }
///
@mixin floated-list($start-from:left, $spacing:0, $spacing-position:before, $child:li) {

  // Test for accepted values
  @if not index(left right, $start-from) {
    $error: app-throw-error($app-invalid-value-error, "@mixin floated-list `#{$start-from}` is not a supported value for `$start-from`. Must be either `left` or `right`");
  }

  @if not index(before after, $spacing-position) {
    $error:  app-throw-error($app-invalid-value-error, "@mixin floated-list `#{$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;
  }

  @include clearfix;

  #{$child} {
    float: $start-from;
    margin-#{$margin-direction}: #{$spacing};
    @content;

    &:#{$child-cancel-position} {
      margin-#{$margin-direction}: 0;
    }
  }
}