Skip to content

Instantly share code, notes, and snippets.

@metaskills
Created July 24, 2012 14:47
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save metaskills/3170386 to your computer and use it in GitHub Desktop.
Save metaskills/3170386 to your computer and use it in GitHub Desktop.
Mapping A Sass List To A Comma Separated Selector
// Using this code below, I was able to itterate over a list of
// color names and append them to an empty list. I was then able
// to use the selectors from there.
$selectors: ();
@each $value in $my-colors-names {
$selector: unquote(".box.#{$value} .box-header");
$selectors: append($selectors, $selector, comma);
}
#{$selectors} { @extend .color-white; }
// However, I would like to make a function that helps with this
// task. Something like this below. The first problem is that I
// need a way to evaluate the `$interpolation` during the each
// block. I have not yet looked to see if there is a `sub()`
// function or some way I can make that a template.
@function map-to-selectors($list, $interpolation) {
$selectors: ();
@each $value in $list {
$selector: unquote($interpolation);
$selectors: append($selectors, $selector, comma);
}
@return $selectors
}
$selectors: map-to-selectors($my-colors-names, ".box.#{$value} .box-header");
// Thoughts? Better ways to use this along side the additional
// functions provided by Compass? A way to lazy eval the template?
@zinkkrysty
Copy link

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