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