Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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][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

SassMeister Gist

$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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment