Challenge 7: Control Flow

[00:00:00]
>> Mike: And this is the smallest exercise of the whole course here. We're still gonna take 12 minutes for it, but we're gonna build on the earlier example. Remember we had the rainbow list of buttons. It was our first use of a mixin. So you're starting with a solution to that problem.

[00:00:17]
But what we wanna do is use the lightness color function and if to basically decide that when a color is too light, we want to change the text on the button from white to black. So that it pops out a little more against the background. So here if like the other two on the yellow button in the middle, if that were still white text you wouldn't be able to see it at all.

[00:00:42]
So this is a really common use case, you can imagine. Our themes may have been really interesting, this function that we just built. But there are certain color combinations where it's just not useful. It's not going to provide what we want. So take the solution to the earlier exercise as your starting point.

[00:01:05]
It should be like a three or four line change. Involving use of the lightness Sass function and an if to conditionally change the background color. So I change the text color if the background color is too light. And the threshold that I'm testing for is 70% or 0.7.

[00:01:25]
Sass does not care which one you use.