sass:color module - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the sass:color module used for?

It provides functions to manipulate colors in Sass, like adjusting brightness, saturation, or mixing colors.

beginner

How do you lighten a color by 20% using sass:color?

Use the color.lighten($color, 20%) function to make the color 20% lighter.

intermediate

What does the mix($color1, $color2, $weight) function do?

It blends two colors together. The $weight controls how much of $color1 is in the mix.

intermediate

How can you change the alpha (opacity) of a color using sass:color?

Use the color.adjust_alpha($color, $amount) function to increase or decrease transparency.

advanced

What is the difference between darken() and adjust-lightness()?

darken() reduces lightness by a percentage, while adjust-lightness() can increase or decrease lightness by a positive or negative amount.

Which function from sass:color would you use to make a color more transparent?

A adjust-alpha()

B lighten()

C mix()

D saturate()

adjust-alpha() changes the transparency (alpha) of a color.

What does mix(red, blue, 50%) return?

A A color halfway between red and blue

B Pure red

C Pure blue

D Black

mix() blends two colors based on the weight; 50% means equal parts red and blue.

Which function would you use to increase the saturation of a color?

A adjust-alpha()

B desaturate()

C darken()

D saturate()

saturate() increases the color's saturation, making it more vivid.

If you want to make a color 10% darker, which function is best?

A lighten($color, 10%)

B mix($color, black, 10%)

C darken($color, 10%)

D adjust-alpha($color, 10%)

darken() reduces the lightness of a color by the given percentage.

What does grayscale($color) do?

A Makes the color fully transparent

B Converts the color to shades of gray

C Increases the color's brightness

D Mixes the color with white

grayscale() removes color saturation, turning it into gray tones.

Explain how you can use the sass:color module to adjust the brightness and transparency of a color.

Think about making colors lighter or darker and more or less see-through.

Describe the difference between mix() and saturate() functions in the sass:color module.

One combines colors, the other changes color intensity.