Compass Inline List

This file can be imported using: @import "compass/utilities/lists/inline-list"

View the Source for this module on Github.

Mixins

View Source: Sass | SCSS 

=inline-list
  list-style-type: none
  &, & li
    margin: 0px
    padding: 0px
    display: inline

@mixin inline-list {
  list-style-type: none;
  &, & li {
    margin: 0px;
    padding: 0px;
    display: inline; } }

makes a list inline.

View Source: Sass | SCSS 

=comma-delimited-list
  +inline-list
  li
    &:after
      content: ", "
    &:last-child
      &:after
        content: ""
    &.last
      &:after
        content: ""

@mixin comma-delimited-list {
  @include inline-list;
  li {
    &:after {
      content: ", "; }
    &:last-child {
      &:after {
        content: ""; } }
    &.last {
      &:after {
        content: ""; } } } }

makes an inline list that is comma delimited. Please make note of the browser support issues before using this mixin.

use of content and :after is not fully supported in all browsers. See quirksmode for the support matrix

:last-child is not fully supported. see quirksmode for the support matrix.

IE8 ignores rules that are included on the same line as :last-child see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details