Saturate and desaturate in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding saturate() function in Sass

What does the saturate($color, $amount) function do to a color in Sass?

A Decreases the color's saturation by the given amount, making colors more gray.

B Increases the color's saturation by the given amount, making colors more vivid.

C Changes the color's brightness by the given amount.

D Changes the color's hue by the given amount.

💡 Hint

Think about what saturation means in colors: how intense or dull a color looks.

The saturate() function increases the saturation of a color, making it look more vivid or intense. It does not affect brightness or hue.

📝 Syntax

intermediate

Correct usage of desaturate() in Sass

Which of the following Sass code snippets correctly desaturates a color by 30%?

A color: desaturate(#ff6600, '30%');

B color: desaturate(#ff6600 30%);

C color: desaturate(#ff6600, 0.3);

D color: desaturate(#ff6600, 30%);

💡 Hint

Check the syntax for function arguments in Sass: commas and units matter.

The desaturate() function requires two arguments separated by a comma: the color and the amount as a percentage. Option D uses the correct syntax.

❓ rendering

advanced

Visual effect of saturate() on a color

Given the Sass code below, what will be the visual difference between the two boxes in a browser?

SASS

$base-color: #6699cc;
.box1 {
  background-color: $base-color;
  width: 100px;
  height: 100px;
}
.box2 {
  background-color: saturate($base-color, 40%);
  width: 100px;
  height: 100px;
}

A The second box will have a more vivid blue color than the first box.

B The second box will be lighter in color than the first box.

C The second box will be gray while the first box is blue.

D Both boxes will look exactly the same.

💡 Hint

Saturation affects how intense or dull a color looks, not brightness or hue.

The saturate() function increases the saturation, so the second box's blue will look richer and more vivid compared to the original color.

❓ selector

advanced

Using desaturate() with CSS variables in Sass

Which Sass code correctly desaturates a CSS variable color by 20%?

SASS

:root {
  --main-color: #e67e22;
}
.element {
  color: ???;
}

A color: desaturate(#e67e22, 20%);

B color: desaturate(var(--main-color), 20%);

C color: desaturate($main-color, 20%);

D color: desaturate(var(--main-color 20%));

💡 Hint

Sass functions work with Sass variables or direct colors, not CSS variables inside functions.

Sass functions like desaturate() cannot process CSS variables directly. You must use a Sass variable or a direct color value. Option A uses a direct color value.

❓ accessibility

expert

Accessibility impact of using saturate() and desaturate()

Which statement best explains how increasing saturation with saturate() affects color accessibility for users with color vision deficiencies?

A Increasing saturation always improves accessibility by making colors easier to distinguish.

B Increasing saturation reduces contrast and makes colors harder to see for everyone.

C Increasing saturation can improve contrast but may not help users with certain types of color blindness.

D Saturation changes do not affect accessibility or color perception.

💡 Hint

Think about how color blindness affects perception of color intensity and contrast.

Increasing saturation can make colors more vivid and improve contrast, but some types of color blindness affect hue perception more than saturation, so it may not always help accessibility.