sass:color module - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the lighten() function in sass:color module

What is the output color of the following Sass code snippet?

$base-color: #336699;
$result: lighten($base-color, 20%);
@debug $result;

SASS

$base-color: #336699;
$result: lighten($base-color, 20%);
@debug $result;

A #4d80b3

B #2a527f

C #6699cc

D #99bbdd

💡 Hint

The lighten() function increases the lightness of the color by the given percentage.

The lighten() function adds 20% lightness to the base color #336699, resulting in #6699cc.

📝 Syntax

intermediate

Correct usage of adjust-hue() function

Which option correctly changes the hue of the color #ff0000 by 90 degrees using adjust-hue() in Sass?

A adjust-hue(#ff0000, 90deg)

B adjust-hue(#ff0000, 0.25turn)

C adjust-hue(#ff0000, 90)

D adjust-hue(#ff0000, 90%)

💡 Hint

The angle can be given as a number without units, which Sass treats as degrees.

In Sass, adjust-hue() accepts the angle as a number (degrees) or with units like deg or turn. The values 90, 90deg, and 0.25turn are valid and mean 90 degrees. 90% is invalid.

❓ rendering

advanced

Resulting color from mix() function

What is the resulting color of this Sass code?

$color1: #0000ff;
$color2: #ff0000;
$result: mix($color1, $color2, 25%);
@debug $result;

SASS

$color1: #0000ff;
$color2: #ff0000;
$result: mix($color1, $color2, 25%);
@debug $result;

A #4000bf

B #bf0040

C #3f00bf

D #bf003f

💡 Hint

The mix() function blends colors weighted by the third parameter, which is the weight of the first color.

mix($color1, $color2, 25%) means 25% of $color1 (#0000ff) and 75% of $color2 (#ff0000). The resulting color is #bf003f.

❓ selector

advanced

Using sass:color functions in a selector context

Given this Sass code, what color will the background be for the .highlight class?

.highlight {
  $base: #008000;
  background-color: adjust-hue(lighten($base, 10%), 180);
}

SASS

.highlight {
  $base: #008000;
  background-color: adjust-hue(lighten($base, 10%), 180);
}

A #339933

B #33cccc

C #33cc33

D #cc3333

💡 Hint

First lighten the green, then rotate the hue by 180 degrees (opposite color).

Lightening #008000 by 10% gives a lighter green (#33cc33). Adjusting hue by 180 degrees shifts green to cyan (#33cccc).

❓ accessibility

expert

Determining contrast ratio with sass:color functions

Using Sass's sass:color module, which option correctly calculates the contrast ratio between #ffffff and #777777?

A contrast(#ffffff, #777777)

B contrast-ratio(#ffffff, #777777)

C color.contrast(#ffffff, #777777)

D color.contrast-ratio(#ffffff, #777777)

💡 Hint

The sass:color module provides a contrast() function to get contrast ratio.

The correct function to get contrast ratio is contrast(). Other options are invalid or do not exist.