Compass Inline List
This file can be imported using:
@import "compass/typography/lists/inline-list"
Imports
- Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Mixins
view sourceinline-list
=inline-list list-style-type: none &, & li margin: 0 padding: 0 display: inline
@mixin inline-list { list-style-type: none; &, & li { margin: 0; padding: 0; display: inline; } }
makes a list inline.
delimited-list($separator)
=delimited-list($separator: ", ") +inline-list li &:after content: $separator &:last-child &:after content: "" @if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) &.last &:after content: ""
@mixin delimited-list($separator: ", ") { @include inline-list; li { &:after { content: $separator; } &:last-child { &:after { content: ""; } } @if support-legacy-browser("ie", "7", $threshold: $css-sel2-support-threshold) { &.last { &:after { content: ""; } } } } }
makes an inline list delimited with the passed string. Defaults to making a comma-separated list.
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
comma-delimited-list
=comma-delimited-list @warn "comma-delimited-list is deprecated. Please use delimited-list instead." +delimited-list
@mixin comma-delimited-list { @warn "comma-delimited-list is deprecated. Please use delimited-list instead."; @include delimited-list; }
See delimited-list @deprecated