Horizontal list mixins

_mixins.scss

// Standard horizontal list, using word-spacing trick to remove whitespace
// between inline-block elements.

@mixin horizontal-list {
  padding: 0;
  text-align: center;
  word-spacing: -1em;
  display: table;
  width: 100%;
  li {
    display: inline-block;
    word-spacing: 0;
  }
}

// Horizontal list separated by :after content.

@mixin horizontal-list-separated($separator:'') {
  @include horizontal-list;
  li:not(.last):after {
    content: $separator;
  }
}

// Horizontal list with padded links.

@mixin horizontal-list-padded($vertical, $horizontal) {
  @include horizontal-list;
  li {
    padding: $vertical 0;
    a {
      padding: $vertical $horizontal;
    }
  }
}

styles.scss

// To make a horizontal list of any <ul>, just do this:

ul.menu {
  @include horizontal-list();
}

// Or, to separate the <li> items by a separator (assuming each <li> contains an <a>):

ul.menu {
  @include horizontal-list-separated("|");
  a {
    padding: 0 10px;
  }
}

// Or, to build horizontal list with padded links (probably used for hover effects):

ul.menu {
  @include horizontal-list-padded(5px, 10px);
  a:hover {
    background: blue;
  }
}