Sass Fundamentals

Sass Fundamentals Challenge 7: Control Flow

Learning Paths:
Check out a free preview of the full Sass Fundamentals course:
The "Challenge 7: Control Flow" Lesson is part of the full, Sass Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students use a conditional in their mixin: setting the text color to white for buttons only if the brightness value of the background color is less than 70%.

Get Unlimited Access Now

Transcript from the "Challenge 7: Control Flow" Lesson

>> 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.