@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($tablet-large) { @extend %clear-fix-tablet-large; margin: 0 #{-$gutter-width}; 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) {}