A modular UI component example

_pagination.scss

// ----
// libsass (v3.2.5)
// ----

// Set file variable
$filename: 'scss/blocks/_pagination.scss';

////////////////////////////////////////////////////////////////////////////////
// @Pagination Map
////////////////////////////////////////////////////////////////////////////////

$pagination: (
  'classes': true,
  
  'class': 'pagination',
  'class-active': 'active',
  'class-sep': 'sep',
  
  'margin': 1em,
  'spacing': 0.5em,
  
  'font-size': 12px,
  'font-family': (helvetica, arial, sans-serif),
  'text-align': center,
  'color': #aaa,
  
  'link-color': #16a6e4,
  'link-color-hover': #fff,
  'link-background': #efefef,
  'link-background-hover': #16a6e4,
  'link-padding': 0.75em 1em,
  'link-border': null,
  'link-border-radius': 3px,
  
) !default;

////////////////////////////////////////////////////////////////////////////////
// @Pagination Mixins
////////////////////////////////////////////////////////////////////////////////

// Make Pagination
// Creates the base styles for pagination.
// @param $options
//   @type map
//   @default $pagination map
@mixin make-pagination($options: ()) {
  $o: map-merge($pagination, $options);
  
  display: block;

  ul {
    display: inline-block;
    margin: map-get($o, 'margin') (-(map-get($o, 'spacing'))) (map-get($o, 'margin') - map-get($o, 'spacing')) 0;
    padding: 0;
    list-style: none;
    
    &:after {
      content: '';
      display: table;
      clear: both;
    }
  }
  
  ul li {
    float: left;
    margin: 0 map-get($o, 'spacing') map-get($o, 'spacing') 0;
  }
}

// Add Pagination Style
// Creates the stylized pagination.
// @param $options
//   @type map
//   @default $pagination map
@mixin add-pagination-style($options: ()) {
  $o: map-merge($pagination, $options);
  
  font-family: map-get($o, 'font-family');
  font-size: map-get($o, 'font-size');
  text-align: map-get($o, 'text-align');
  
  ul li {
    a,
    &.#{map-get($o, 'class-sep')} {
      display: block;
      padding: map-get($o, 'link-padding');
    }
  
    a {
      background: map-get($o, 'link-background');
      border: map-get($o, 'link-border');
      border-radius: map-get($o, 'link-border-radius');
      text-decoration: none;
      color: map-get($o, 'link-color');
    }
    a:hover,
    &.#{map-get($o, 'class-active')} a {
      background: map-get($o, 'link-background-hover');
      color: map-get($o, 'link-color-hover');
    }
  
    &.#{map-get($o, 'class-sep')} {
      color: map-get($o, 'color');
    }
  }
}

// Check if we should output classes
@if (map-get($pagination, 'classes') == true) {

/*==============================================================================
  @Pagination - #{$filename}
==============================================================================*/

.#{map-get($pagination, 'class')} {
  @include make-pagination();
  @include add-pagination-style();
}

} // endif classes

pagination.css

/*==============================================================================
  @Pagination - scss/blocks/_pagination.scss
==============================================================================*/
.pagination {
  display: block;
  font-family: helvetica, arial, sans-serif;
  font-size: 12px;
  text-align: center;
}

.pagination ul {
  display: inline-block;
  margin: 1em -0.5em 0.5em 0;
  padding: 0;
  list-style: none;
}

.pagination ul:after {
  content: '';
  display: table;
  clear: both;
}

.pagination ul li {
  float: left;
  margin: 0 0.5em 0.5em 0;
}

.pagination ul li a,
.pagination ul li.sep {
  display: block;
  padding: 0.75em 1em;
}

.pagination ul li a {
  background: #efefef;
  border-radius: 3px;
  text-decoration: none;
  color: #16a6e4;
}

.pagination ul li a:hover,
.pagination ul li.active a {
  background: #16a6e4;
  color: #fff;
}

.pagination ul li.sep {
  color: #aaa;
}

pagination.html

<nav class="pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="sep">...</li>
    <li><a href="#">10</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>