Lighten and darken functions in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the lighten() function do in Sass?

It makes a color lighter by increasing its lightness by a given percentage.

beginner

How does the darken() function affect a color in Sass?

It makes a color darker by decreasing its lightness by a given percentage.

beginner

Write a Sass code snippet to lighten a blue color by 20%.

$light-blue: lighten(blue, 20%);

intermediate

What happens if you use darken($color, 100%) in Sass?

The color becomes completely black because lightness is reduced to 0%.

intermediate

Why is it better to use lighten() and darken() instead of hardcoding colors?

Because they keep color relationships consistent and make it easier to adjust themes by changing base colors.

What parameter does the lighten() function take besides the color?

A A percentage to increase lightness

B A hex code

C A font size

D A pixel value

The lighten() function takes a color and a percentage to increase its lightness.

If you want to make a color darker by 10%, which function do you use?

A fade-out()

B lighten()

C saturate()

D darken()

The darken() function decreases the lightness of a color by the given percentage.

What will lighten(red, 0%) return?

A The same red color

B A lighter red

C A darker red

D White

Using 0% means no change, so the color stays the same.

Which CSS property can be affected by using lighten() and darken() in Sass?

A font-family

B background-color

C margin

D border-width

These functions change colors, so they affect properties like background-color.

What is the range of the percentage value used in lighten() and darken()?

A 1 to 10

B 0 to 255

C 0% to 100%

D Any negative number

The percentage must be between 0% (no change) and 100% (full lightness or darkness).

Explain how the lighten() and darken() functions work in Sass and give an example of each.

Think about how colors get lighter or darker by changing their lightness.

Why is using lighten() and darken() functions helpful when designing a website's color theme?

Consider how changing one base color can update many related colors.