Last Updated: March 14, 2018
·
3.847K
· nathos

Using lists like a hash in Sass

That's right, you can use Sass lists like an associative array!

In this example we're basically creating a comma-separated list of space-separated lists (zomg). Here's the mixin (with some extra logic to take an "after" argument that creates a pseudo-element. You know, just for fun):

@mixin category-colors($after: false)
  @each $category in $categories
    @if $after == true
      .cat-#{nth($category, 1)}:after
        background-color: nth($category, 2)

    @else
      .cat-#{nth($category, 1)}
        background-color: nth($category, 2)

Pretty crazy, right? CRAZY AWESOME.

See a full usage example with CSS output in this GitHub gist

2 Responses
Add your response

Thanks! This worked great for a problem we had where we had to associate a class with a color.

over 1 year ago ·

I understand the differences are often minimal, but it would've been neat to have an alternate SCSS version in addition to the Sass code. :)

over 1 year ago ·