I came across a problem recently where I wanted to gradually change the colors of a set of list items - but without assigning a class with a color to each one. Enter SASS Control Directives (I thought these were just called functions but apparently I was wrong).
My front-end development definition of control directives is: those ifs, whiles, eaches, and fors that you use in programming to (essentially) do a bunch of repetitive tasks that you don't feel like doing manually.
How to Use the @While Loop
In the Codepen below, I use the
@while directive to loop through a number of steps to assign each
li:nth-child() a different background color. This way I don't have to go and add a class to each
The output to your CSS looks like this:
And you apply it to your HTML like this:
Here is the Codepen, with examples using the darken, transparentize, adjust-hue, and mix SASS functions.
Special thanks to Jackie Balzer's site for helping me greatly in understanding the syntax for the color functions.
Do you have other cool uses of SASS control directives?