Advanced Sass : online course

Generating color swatches with adjust-hue()

Imagine this use case: for a line graph with a varying number of lines, you need X unique colors. To prevent confusion they need to be as far apart as possible. In the HTML you only want to use some class names to make this work. Sass it!

To simplify things though, we're not coloring graph lines but dynamically setting the background color for twenty divs. How we do that using the adjust-hue() Sass function you can see in the screencast below. If you want to play around with the code, check out this gist on SassMeister. Enjoy!

PS: This screencast expects you to know what "hue" is, and how it relates to a color wheel. Luckily we covered that last week, so feel free to brush up on "Sass color basics: hue, saturation, lightness" before watching.

The above is part of the Advanced Sass online course, which helps you turn your Sass up to eleven. You can become a Sass expert too!