Sass 101 - A newb's guide: Operations Advanced - list of values

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 make them useful. The nth function can access items in a list, the join function can join multiple lists together, and the append function can add items to lists. The @each rule can also add styles for each item in a list.

Read more on 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

SassMeister Gist