sass-site/source/assets/stylesheets/components/_lists.scss.erb

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list($resolution: false) {
  @if $resolution == false { @extend %reset-list; }
  @else                    { @extend %reset-list-#{$resolution}; }

  li {
    display: inline-block;
    margin: {
      right: -2px;
      left:  $gutter-width;
    }

    &:first-child { margin-left: 0; }
  }
}

%reset-list      { @include reset-list; }
%horizontal-list { @include horizontal-list; }

<% data.layout.resolutions.each do |resolution| %>
  @include breakpoint($<%= resolution.target %>) {
    %reset-list-<%= resolution.target %> { @include reset-list; }
    %horizontal-list-<%= resolution.target %> {
      @include horizontal-list(<%= resolution.target %>);
    }
  }
<% end %>

.tiled-list {
  @extend %reset-list;
  margin: 0 auto;

  @include breakpoint($screen-small) {
    @extend %clear-fix-screen-small;
    margin: 0 #{-$gutter-width / 2};
    max-width: none;

    li {
      float: left;
      width: 100 / 3 * 1%;
      padding: {
        right: $gutter-width;
         left: $gutter-width;
      }

      &:nth-child(3n+4) { clear: both; }

      li {
        float: none;
        width: auto;
        padding: {
          right: 0;
           left: 0;
        }
      }
    }
  }
}

%description-list {
  @include breakpoint($mobile-large) { dd { margin-left: 0; } }

  @include breakpoint($tablet-small) {
    @extend %table-layout-tablet-small;
    table-layout: fixed;
    text-align: left;

    dt,
    dd { @extend %table-layout-cell-baseline-tablet-small; }

    dt { padding-right: $gutter-width / 2; }
    dd { padding-left:  $gutter-width / 2; }
  }

  @include breakpoint($screen-small) {
    dt { width: 100 / 3 * 1%; }
  }
}

@include breakpoint($mobile-small) {}