SASS: Responsive pagination snippet

gistfile1.sass

// PAGINATION
////////////////////////////////////////////////////////////////////

// Markup Example:
// <ul class="pagination">
// 	<li class="first-off"><span class="ficon ficon-first" title="最初へ"></span></li>
// 	<li class="previous-off"><span class="ficon ficon-previous" title="前へ"></span></li>
// 	<li class="active">1</li>
// 	<li><a href="javascript:void 0;">2</a></li>
// 	<li><a href="javascript:void 0;">3</a></li>
// 	<li><a href="javascript:void 0;">4</a></li>
// 	<li><a href="javascript:void 0;">5</a></li>
// 	<li class="next"><a href="javascript:void 0;"><span class="ficon ficon-next" title="次へ"></span></a></li>
// 	<li class="last"><a href="javascript:void 0;"><span class="ficon ficon-last" title="最後へ"></span></a></li>
// </ul>
////////////////////////////////////
$pagination-classname: "pagination" !default;
$include-html-pagination-classes: $include-html-classes !default;
$pagination-link-color: #f77307 !default;
$pagination-link-hover-bg: lighten($pagination-link-color, 30%) !default;
$pagination-link-active-color: #fff !default;

@if $include-html-pagination-classes {
	.#{$pagination-classname} {
		@include inline-block();
		margin: 24px 0;
		vertical-align: middle;
		letter-spacing: 3px;
		line-height: 0;
		@media #{$small-only} {
			display: block;
			width: 100%;
			margin: 20px 0;
			letter-spacing: -0.2em;
			white-space: nowrap;
		}
		li {
			@include inline-block();
			@include font-size(1);
			overflow: hidden;
			border-radius: $global-radius;
			text-align: center;
			white-space: nowrap;
			line-height: 1.3;
			letter-spacing: normal;
			a {
				@include inline-block();
				&:link, &:visited {
					padding: 5px 10px;
					color: $pagination-link-color;
					text-decoration: none;
					@include transition-property(background-color);
					@include transition-duration(0.1s);
					@media #{$small-only} {
						padding: 5px 8px;
					}
				}
				&:hover, &:active {
					color: darken($pagination-link-color, 15%);
					background-color: $pagination-link-hover-bg;
					text-decoration: none;
				}
			}
			&.active {
				background-color: $pagination-link-color;
				color: $pagination-link-active-color;
			}
		}
		.previous-off, .next-off, .first-off, .last-off, .active {
			padding: 5px 9px;
			@media #{$small-only} {
				padding: 5px 7px;
			}
		}
		.previous-off, .next-off, .first-off, .last-off {
			@include opacity(0.3);
		}
	}
}