sass-site/source/assets/css/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: {
      left: -2px;
      right:  2em;
    }

    &: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 %>

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

  @include breakpoint($tablet-large) {
    @extend %clear-fix-tablet-large;
    margin: 0 #{-$gutter-width};

    > li {
      float: left;
      padding: {
        right: $gutter-width;
         left: $gutter-width;
      }
    }
  }
}

.list-columns {
  @extend %list-columns;
  text-align: center;

  h3 { display: inline-block; white-space: nowrap; }

  p,
  dl { text-align: left; }

  @include breakpoint($tablet-large) {
    > li {
      width: 50%;

      &:nth-child(odd) { clear: both; }
    }
  }
}

.list-tiled {
  @extend %list-columns;

  @include breakpoint($tablet-large) {
    > li {
      width: 100 / 3 * 1%;

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

ol {
  &.list-columns,
  &.list-feature {
    list-style: decimal {
      position: inside;
    }

    ul,
    ol { list-style-position: outside; }

    span.info {
      @include font-size-small;
    }
  }
}

%description-list {
  max-width: none;

  @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%; }
  }
}

.list-feature {
  @extend %reset-list;
  @include font-size-large;
}