Using Sass’ @each to create DRY selectors

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.