Just a quick article based on a post by Natalie Weizenbaum in the Sass Google Group on how to use the @each
directive to create selectors.
Someone there was looking for a way to use @each
while keeping a DRY output. I haven’t used @each
in this way yet (I usually use it when the properties change for each key, like when going over an array of social media networks), but I can imagine there are use cases.
Normally, this code:
Would result in:
But what if you want DRY’er code and want to combine the selectors, like:
Natalie suggests this “hacky” approach:
Maybe not the most elegant solution, but depending on the situation it may be better than the alternative. I don’t think I’ll be using it, but hey, it’s a clever solution.