SASS Color Functions 1 — Questions and Answers
Question 1: What does the Sass `lighten()` function do?
- Increases the saturation of a color by a fixed amount
- Increases the HSL lightness of a color by a fixed amount (Correct answer)
- Blends two colors together based on a weight
- Converts a color to its complementary hue
Correct answer: Increases the HSL lightness of a color by a fixed amount
`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?
- darken($amount, $color)
- darken($color, $percentage, $alpha)
- darken($color, $amount) (Correct answer)
- darken($hue, $saturation, $color)
Correct answer: darken($color, $amount)
`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?
- blend()
- combine()
- merge()
- mix() (Correct answer)
Correct answer: mix()
`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()`?
- It can accept an existing color variable plus an alpha value as arguments (Correct answer)
- It only accepts raw RGB number values
- It requires hex color strings as input
- It does not support alpha values below 0.5
Correct answer: It can accept an existing color variable plus an alpha value as arguments
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?
- The inverted RGB values of the color
- A darkened version of the color
- The color 180 degrees opposite on the color wheel (Correct answer)
- The grayscale version of the color
Correct answer: The color 180 degrees opposite on the color wheel
`complement($color)` returns the complementary color by rotating its HSL hue exactly 180 degrees on the color wheel.
Question 6: What does the `grayscale()` function do in Sass?
- Reduces the lightness of a color to exactly 50%
- Converts a color to pure black or white only
- Removes the alpha channel from the color
- Converts a color to grayscale by setting its HSL saturation to 0% (Correct answer)
Correct answer: Converts a color to grayscale by setting its HSL saturation to 0%
`grayscale($color)` sets the HSL saturation of a color to 0%, producing a grayscale equivalent while preserving the original lightness.
Question 7: What is the result of calling `saturate($color, 20%)` in Sass?
- Sets the saturation of $color to exactly 20%
- Increases the saturation of $color by 20% (Correct answer)
- Decreases the saturation of $color by 20%
- Multiplies the current saturation of $color by 20%
Correct answer: Increases the saturation of $color by 20%
`saturate($color, $amount)` increases the HSL saturation of a color by the specified percentage amount, making it more vivid.
SASS Color Functions 1
What does the Sass `lighten()` function do?