gavinhewitt
7/24/2012 - 2:47 PM

Mapping A Sass List To A Comma Separated Selector

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?