Color values and manipulation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are the common color formats supported in Sass?

Sass supports several color formats including named colors (like red), hexadecimal (like #ff0000), RGB (like rgb(255, 0, 0)), RGBA (with alpha transparency), HSL (hue, saturation, lightness), and HSLA (HSL with alpha).

beginner

How does the lighten() function work in Sass?

The lighten($color, $amount) function makes a color lighter by increasing its lightness by the given percentage amount. For example, lighten(#0000ff, 20%) makes blue 20% lighter.

beginner

What does the rgba() function do in Sass?

The rgba() function creates a color with red, green, blue, and alpha (opacity) values. Alpha controls transparency from 0 (fully transparent) to 1 (fully opaque). Example: rgba(255, 0, 0, 0.5) is semi-transparent red.

intermediate

Explain the difference between darken() and desaturate() in Sass.

darken($color, $amount) reduces the lightness of a color, making it darker. desaturate($color, $amount) reduces the saturation, making the color less intense or more gray.

intermediate

How can you mix two colors in Sass?

Use the mix($color1, $color2, $weight) function. It blends two colors together. The optional $weight (0% to 100%) controls how much of $color1 is in the mix. For example, mix(red, blue, 50%) creates purple.

Which Sass function would you use to make a color more transparent?

A lighten()

B saturate()

C rgba()

D darken()

The rgba() function allows you to set the alpha (opacity) value, making a color more transparent.

What does the desaturate($color, 30%) function do?

A Reduces the color's saturation by 30%

B Makes the color 30% lighter

C Makes the color 30% darker

D Increases the color's saturation by 30%

Desaturate reduces the saturation, making the color less intense.

If you want to blend 70% red and 30% blue, which function and weight would you use?

A mix(red, blue, 70%)

B mix(blue, red, 70%)

C lighten(red, 70%)

D darken(blue, 30%)

The weight parameter controls how much of the first color is in the mix.

Which color format includes transparency in Sass?

A HSL

B named colors (like red)

C hexadecimal (#rrggbb)

D RGBA

RGBA includes an alpha channel for transparency.

What happens if you use darken($color, 50%)?

A The color becomes 50% lighter

B The color becomes 50% darker

C The color becomes 50% more saturated

D The color becomes 50% less saturated

Darken reduces the lightness, making the color darker.

Describe how you can change a color's brightness and transparency in Sass.

Think about functions that adjust lightness and opacity.

Explain how to blend two colors in Sass and control the mix ratio.

Consider how to combine colors with a function.

Practice

1. Which Sass function would you use to make a color lighter?

easy

A. rgba()

B. darken()

C. lighten()

D. mix()

Solution

1. Step 1: Understand the purpose of lighten()

   The lighten() function increases the lightness of a color, making it lighter.

2. Step 2: Compare with other functions

   darken() makes colors darker, rgba() changes transparency, and mix() blends two colors.

3. Final Answer:

   lighten() -> Option C

4. Quick Check:

   Make color lighter = lighten() [OK]

Hint: Lighten means increase brightness, so use lighten() [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Using rgba() to change brightness
• Mixing colors instead of lightening

2. Which of the following is the correct syntax to make a color 20% darker in Sass?

easy

A. darken(#ff0000, '20%')

B. darken(#ff0000 20%)

C. darken(#ff0000; 20%)

D. darken(#ff0000, 20%)

Solution

1. Step 1: Check function syntax

   The darken() function takes two arguments separated by a comma: a color and a percentage without quotes.

2. Step 2: Validate each option

   darken(#ff0000, 20%) uses a comma and percentage without quotes, which is correct. Options B and C miss the comma or use wrong separators. darken(#ff0000, '20%') uses quotes around percentage, which is invalid.

3. Final Answer:

   darken(#ff0000, 20%) -> Option D

4. Quick Check:

   Correct syntax uses comma and percentage without quotes [OK]

Hint: Use comma between color and percentage, no quotes on percent [OK]

Common Mistakes:

• Omitting comma between arguments
• Putting percentage in quotes
• Using semicolon instead of comma

3. What color will this Sass code produce?

$base: #0000ff;
$mix-color: #ff0000;
$result: mix($base, $mix-color, 50%);

medium

A. #ff0000 (red)

B. #800080 (purple)

C. #0000ff (blue)

D. #808000 (olive)

Solution

1. Step 1: Understand mix() function

   The mix() function blends two colors by a given weight. 50% means equal parts of both colors.

2. Step 2: Mix blue and red equally

   Mixing pure blue (#0000ff) and pure red (#ff0000) equally results in purple (#800080).

3. Final Answer:

   #800080 (purple) -> Option B

4. Quick Check:

   Mix blue + red equally = purple [OK]

Hint: Mix equal red and blue = purple [OK]

Common Mistakes:

• Thinking mix returns original color
• Confusing olive with purple
• Ignoring the 50% weight in mix()

4. Identify the error in this Sass code:

$color: lighten(#123456 10%);

medium

A. Missing comma between color and percentage

B. Percentage should be negative

C. Color hex code is invalid

D. lighten() cannot take percentages

Solution

1. Step 1: Check lighten() function syntax

   The lighten() function requires two arguments separated by a comma: a color and a percentage.

2. Step 2: Identify missing comma

   The code uses a space instead of a comma between #123456 and 10%, causing a syntax error.

3. Final Answer:

   Missing comma between color and percentage -> Option A

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Check commas between function arguments [OK]

Common Mistakes:

• Using space instead of comma between arguments
• Thinking percentage must be negative
• Believing lighten() can't take percentages

5. You want to create a button background color that is 30% lighter than a base color $primary: #0066cc; and add 50% transparency. Which Sass code correctly does this?

hard

A. $button-bg: rgba(lighten($primary, 30%), 0.5);

B. $button-bg: lighten(rgba($primary, 0.5), 30);

C. $button-bg: lighten($primary, 30%, 0.5);

D. $button-bg: rgba($primary, lighten(30%, 0.5));

Solution

1. Step 1: Lighten the base color first

   Use lighten($primary, 30%) to increase brightness by 30%.

2. Step 2: Add transparency with rgba()

   Wrap the lightened color in rgba(..., 0.5) to set 50% opacity.

3. Step 3: Check other options

   $button-bg: lighten(rgba($primary, 0.5), 30); uses amount without % unit, which is invalid. $button-bg: lighten($primary, 30%, 0.5); uses wrong argument count. $button-bg: rgba($primary, lighten(30%, 0.5)); misuses rgba() arguments.

4. Final Answer:

   $button-bg: rgba(lighten($primary, 30%), 0.5); -> Option A

5. Quick Check:

   Lighten first, then add transparency [OK]

Hint: Lighten color first, then wrap with rgba() for transparency [OK]

Common Mistakes:

• Adding transparency before lightening
• Passing wrong number of arguments
• Misordering function calls