Comma separated list items with SCSS (Oxford comma optional)
For semantics geeks...
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:'\002C\0000a0';
}
&:last-child:after {
content:'';
}
&:last-child:before {
content:' and ';
}
}
}
@mixin no-oxford {
&.no-oxford {
li:nth-last-child(2):after {
content:'\0000a0';
}
}
}
ul.comma-list {
@include comma-list;
}
ul.comma-list.no-oxford {
@include comma-list;
@include no-oxford;
}
SO THAT
<ul class="comma-list">
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
RENDERS
John, Paul, George, and Ringo
AND
<ul class="comma-list no-oxford">
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
RENDERS
John, Paul, George and Ringo
Written by Dwayne Anderson
Related protips
2 Responses
love it
over 1 year ago
·
You should be able to do &:not(:last-child):after
, and save yourself from typing this part:
&:last-child:after {
content:'';
}
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#