Skip to content

Instantly share code, notes, and snippets.

@nathos
Last active May 10, 2017 09:10
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save nathos/1212291 to your computer and use it in GitHub Desktop.
Save nathos/1212291 to your computer and use it in GitHub Desktop.
Using lists like a hash in Sass
@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)
// Categories & Category Colors
// this is a comma-separated list of space-separated lists!
$categories: site teal, youth orange, poetry plum, fiction salmon, creativewriting steelblue
// The placeholder selector we'll be @extending -- placeholder selectors require Sass 3.2
%category-colors
@include category-colors
.category-banners
li
// @extend the color classes into the list items
@extend %category-colors
/* Note that the placeholder class isn't output in the CSS */
.category-banners li .cat-site {
background-color: teal;
}
.category-banners li .cat-youth {
background-color: orange;
}
.category-banners li .cat-poetry {
background-color: plum;
}
.category-banners li .cat-fiction {
background-color: salmon;
}
.category-banners li .cat-creativewriting {
background-color: steelblue;
}
@nathos
Copy link
Author

nathos commented Jun 18, 2012

added CSS output

@nathos
Copy link
Author

nathos commented Aug 23, 2012

Updated with the awesome new placeholder selectors available in Sass 3.2

@taupecat
Copy link

Hmm, this looks pretty cool, and almost solves a problem i'm having, except my "hash" would have so many options in it it would get confusing. I need a true hash to keep things orderly.

@jackmcmorrow
Copy link

I could kiss you right now, man...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment