Last Updated: February 25, 2016
·
1.092K
· pointpointclick

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

2 Responses
Add your response

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 ·