I don't post much in the way of code on my blog, most of my tech posts are bug fixes or esoteric configuration. I’ve been sitting on a nifty sass mixin for about two years. and I've recently ported it to codepen. It’s clever for color theming elements. What it requires is:

  • A predefined list/set of colors
  • The desire to use all of these colors on multiple CSS attributes (borders, backgrounds, color, etc) and UI elements
  • A simple way via CSS to set the color dynamically

See the Pen Sass parent mixin by Greg Gant (@fuzzywalrus) on CodePen.


Sass doesn't have arrays. Thus you need to iterate through multiple lists, one to define the CSS name and one with the corresponding color value. This can be taken further so other elements on a page could use other themes, even if the parent theme is different.


See the Pen Sass mixing by Greg Gant (@fuzzywalrus) on CodePen.


In no way is this limited to colors only, this could be done with lists of any attributes and values.