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