Lately I’ve been working on a project that has a fairly large color palette. The brand has 9 different colors and the main components for the site need to be available in every color. I was going through the sass files, and after lots and lots of scrolling, I decided that no, I can’t do this. There must be a better way.
And so I will no longer be individually declaring variants for each color class because:
- Too time consuming.
- NOT AT ALL D.R.Y.
There was a lot of this:
Since we already had our colors stored as variables, I created another variable of all the colors, as well as their corresponding class name as a string:
By keeping the class name and the color variable together with parentheses, we could easily loop through them and use string interpolation to give us the values that we want:
So in the above example we get the same compiled code as if we wrote out all those class names manually. And as an extra bonus, if any one of those colors changes, or one has to be added or removed, all we have to do is update our $colors variable!
That’s it! The code we have to write is reduced, our files are more readable and more manageable. WIN!