SASS Color Functions 3

Question 1

How does `scale-color()` differ from `adjust-color()` in Sass?

Accepted Answer

`scale-color()` scales values proportionally to their current value; `adjust-color()` changes values by fixed amounts

Answer

`scale-color()` adjusts each property by a percentage of the distance to its maximum or minimum, while `adjust-color()` adds or subtracts a fixed absolute amount.

Question 2

Which of the following is a valid use of `adjust-color()` in Sass?

Accepted Answer

adjust-color($color, $red: 20, $blue: -10)

Answer

`adjust-color()` uses keyword arguments such as `$red`, `$green`, `$blue`, `$hue`, `$saturation`, `$lightness`, and `$alpha` to modify specific channels.

Question 3

What does `change-color($color, $lightness: 50%)` do in Sass?

Accepted Answer

Sets the HSL lightness of $color to exactly 50%

Answer

`change-color()` sets specific channel properties to exact absolute values, so `$lightness: 50%` forces the lightness to exactly 50% regardless of the original.

Question 4

In the new Sass module system, which built-in module provides color manipulation functions?

Accepted Answer

sass:color

Answer

The `sass:color` module, loaded with `@use 'sass:color'`, provides color functions like `color.mix()`, `color.adjust()`, `color.scale()`, and `color.change()`.

Question 5

What does `mix(#ff0000, #0000ff, 25%)` produce in Sass?

Accepted Answer

A color that is 25% red and 75% blue

Answer

The `$weight` parameter in `mix()` specifies how much of the FIRST color to use, so 25% means 25% of the first color (red) and 75% of the second (blue).

SASS Practice Test

SASS Practice Test

SASS Color Functions 3