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
Written by Nathan Henderson
Related protips
2 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#