SASS Color Functions

Question 1

What does the Sass `lighten()` function do?

Accepted Answer

Increases the HSL lightness of a color by a fixed amount

Answer

`lighten($color, $amount)` increases the HSL lightness component of a color by the specified percentage amount.

Question 2

What is the correct syntax for the `darken()` function in Sass?

Accepted Answer

darken($color, $amount)

Answer

`darken($color, $amount)` takes the color as the first argument and the percentage to darken as the second argument.

Question 3

Which Sass function blends two colors together based on a weight percentage?

Accepted Answer

mix()

Answer

`mix($color1, $color2, $weight)` blends two colors, with the optional weight (default 50%) controlling how much of the first color is used.

Question 4

How does Sass's `rgba()` function differ from the native CSS `rgba()`?

Accepted Answer

It can accept an existing color variable plus an alpha value as arguments

Answer

Sass extends `rgba()` to accept a color variable as the first argument and an alpha value as the second, making it easy to apply transparency to existing color variables.

Question 5

What does the `complement()` function return in Sass?

Accepted Answer

The color 180 degrees opposite on the color wheel

Answer

`complement($color)` returns the complementary color by rotating its HSL hue exactly 180 degrees on the color wheel.

SASS Practice Test

SASS Practice Test

SASS Color Functions