Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.
On their own, lists don’t do much, but the [Sass list functions][list-function] make them useful. The [nth function][nth-function] can access items in a list, the [join function][join-function] can join multiple lists together, and the [append function][append-function] can add items to lists. The [@each rule][each-rule] can also add styles for each item in a list.
[Read more on lists][read-more] [list-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions [nth-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#nth-instance_method [join-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#join-instance_method [append-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#append-instance_method [each-rule]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive [read-more]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
$icons: (rss "\f09e") (phone "\e001") (headphones "\e008")
%standard-margin
margin-right: 0.25em
@each $icon in $icons
%icon-#{nth($icon, 1)}:before
@extend %standard-margin
content: nth($icon, 2)
.rss-tag
@extend %icon-rss
.call-us
@extend %icon-phone
.listen-now
@extend %icon-headphones