SASS Color Functions 2 — Questions and Answers
Question 1: What does `desaturate($color, $amount)` do in Sass?
- Increases the HSL saturation by the specified amount
- Converts the color to a different hue
- Decreases the HSL saturation of a color by the specified amount (Correct answer)
- Sets the saturation to zero regardless of $amount
Correct answer: Decreases the HSL saturation of a color by the specified amount
`desaturate($color, $amount)` reduces the HSL saturation of a color by the given percentage, making it less vivid and closer to gray.
Question 2: What does the Sass `invert()` function do to a color?
- Converts the color to its negative lightness value
- Inverts the RGB values of the color by subtracting each channel from 255 (Correct answer)
- Returns the complementary hue of the color
- Flips the hue by exactly 90 degrees
Correct answer: Inverts the RGB values of the color by subtracting each channel from 255
`invert($color, $weight)` inverts each RGB channel by subtracting its value from 255, producing a negative-like effect, with optional weight to blend with the original.
Question 3: Which Sass function increases the opacity of a color?
- lighten()
- transparentize() / fade-out()
- rgba() with a lower value
- opacify() / fade-in() (Correct answer)
Correct answer: opacify() / fade-in()
`opacify($color, $amount)` (aliased as `fade-in()`) increases the alpha value of a color by the specified amount, making it less transparent.
Question 4: What does the Sass `hue()` function return?
- The HSL saturation as a percentage
- The HSL lightness as a percentage
- The red channel value (0–255)
- The hue of a color in degrees (0–360) (Correct answer)
Correct answer: The hue of a color in degrees (0–360)
`hue($color)` returns the HSL hue of a color as a number between 0deg and 360deg, representing its position on the color wheel.
Question 5: What value does `lightness(white)` return in Sass?
- 0%
- 50%
- 100% (Correct answer)
- 255%
Correct answer: 100%
`lightness($color)` returns the HSL lightness of a color; pure white has a lightness of 100% in the HSL model.
Question 6: What does `adjust-hue($color, 180deg)` do in Sass?
- Sets the hue to exactly 180 degrees
- Rotates the hue of the color by 180 degrees on the color wheel (Correct answer)
- Adds 180 to the saturation value
- Converts the color to its grayscale equivalent
Correct answer: Rotates the hue of the color by 180 degrees on the color wheel
`adjust-hue($color, $degrees)` changes the hue of a color by rotating it relatively by the given number of degrees, so 180deg produces the complementary color.
Question 7: Which Sass function extracts the alpha (opacity) value from a color?
- alpha() / opacity() (Correct answer)
- transparency()
- fade-out()
- opacify()
Correct answer: alpha() / opacity()
`alpha($color)` (aliased as `opacity()`) returns the alpha channel value of the color as a number between 0 (fully transparent) and 1 (fully opaque).
SASS Color Functions 2
What does `desaturate($color, $amount)` do in Sass?