Itens de lista separados por vírgulas com SCSS (vírgula Oxford opcional)

Para geeks de semântica …

USE SCSS

@import "compass/utilities/lists/inline-block-list";

@mixin comma-list {
  @include inline-block-list-container;
  li {
    @include inline-block-list-item;
    &:after {
      content:'02C000a0';
    }
    &:last-child:after {
      content:'';
    }
    &:last-child:before {
      content:' and ';
    }
  }
}
@mixin no-oxford {
  &.no-oxford {
    li:nth-last-child(2):after {
      content:'000a0';
    }
  }  
}

ul.comma-list {
  @include comma-list;
}
ul.comma-list.no-oxford {
  @include comma-list;
  @include no-oxford;
}

DE MODO A

<ul class="comma-list">
  <li>John</li>
  <li>Paul</li>
  <li>George</li>
  <li>Ringo</li>
</ul>

RENDERS

John, Paul, George e Ringo

E

<ul class="comma-list no-oxford">
  <li>John</li>
  <li>Paul</li>
  <li>George</li>
  <li>Ringo</li>
</ul>

RENDERS

John, Paul, George e Ringo