list: punctuated

view source

Punctuate an HTML list.

use-name

scut-list-punctuated

type

mixin, with extension placeholder(s)

arguments

$divider

default

", "
$display

default

inline

Change to inline-block if you don't want your list items spanning lines.
$no-margin

default

true

If true, top and bottom margins will be removed from the list.

compatibility

This utility uses the :not and :last-child selectors, which are not supported in IE8 without a polyfill.

Keep your HTML semantic and your punctuation traditional.

Since the most common punctuated list uses commas, commas are the default $divider and the comma list is available as its own placeholder:

%scut-list-comma

Only the list's immediate children are punctuated (ul > li): Scut does not presume to know what you plan to do with sub-lists.

example

SCSS

.eg-punctuated-list {
  @include scut-list-punctuated;
  // or @extend %scut-list-comma;
}
.eg-semicolon-list {
  @include scut-list-punctuated("; ", $no-margin: false);
}
.eg-circle-list {
  @include scut-list-punctuated("\0020\2022\0020");
}

compiled CSS

.eg-punctuated-list {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.eg-punctuated-list > li {
  display: inline;
}
.eg-punctuated-list > li:not(:last-child):after {
  content: ", ";
}

.eg-semicolon-list {
  list-style-type: none;
  padding-left: 0;
}
.eg-semicolon-list > li {
  display: inline;
}
.eg-semicolon-list > li:not(:last-child):after {
  content: "; ";
}

.eg-circle-list {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.eg-circle-list > li {
  display: inline;
}
.eg-circle-list > li:not(:last-child):after {
  content: " • ";
}

Result

list item
list item
list item

list item
list item
list item

list item
list item
list item