Created
July 24, 2012 14:47
-
-
Save metaskills/3170386 to your computer and use it in GitHub Desktop.
Mapping A Sass List To A Comma Separated Selector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This may be helpful: http://portfolio.miphe.com/showcase/sass-dry-selectors/