Complement and invert functions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the complement function in Sass

What does the complement() function do when applied to a color in Sass?

A It returns the color opposite on the color wheel, effectively the complementary color.

B It inverts the brightness of the color, making dark colors light and vice versa.

C It converts the color to grayscale by removing all saturation.

D It returns the color with the alpha channel inverted.

💡 Hint

Think about colors opposite each other on a color wheel.

The complement() function returns the complementary color, which is the color opposite on the color wheel. This is useful for creating contrasting color schemes.

📝 Syntax

intermediate

Using the invert function in Sass

What is the output color of this Sass code?

$color: #123456;
$result: invert($color);

SASS

$color: #123456;
$result: invert($color);

A #edcb9a

B #edcba9

C #edcba8

D #edc9a8

💡 Hint

Invert flips each RGB channel by subtracting from 255.

The invert function subtracts each RGB channel from 255. For #123456 (18,52,86), invert is (237,203,169) which is #edcba9.

❓ rendering

advanced

Visual effect of complement and invert combined

If you apply invert(complement($color)) to a color in Sass, what is the visual result compared to the original color?

A The original color restored exactly.

B A color that is the complement of the inverted original color.

C A color that is neither the complement nor the invert, but a unique third color.

D A grayscale version of the original color.

💡 Hint

Think about the order of operations and how complement and invert affect colors differently.

Applying invert to the complement produces a new color that is not the original or a simple complement or invert. The operations do not cancel each other out.

❓ selector

advanced

Selecting elements with complementary colors in Sass

Which Sass selector syntax correctly applies a style to elements whose background color is the complement of $base-color?

SASS

$base-color: #3498db;

// Which selector applies styles to elements with background color complement of $base-color?

A element[style*="background-color: #{complement($base-color)}"]

B element[style*="background-color: complement($base-color)"]

C element[style*="background-color: invert($base-color)"]

D element[style*="background-color: $base-color"]

💡 Hint

Remember Sass interpolation syntax inside selectors.

To use a function result inside a selector attribute value, you must interpolate it with #{...}. Option A correctly interpolates the complement color.

❓ accessibility

expert

Ensuring accessibility when using complement and invert colors

When using complement() and invert() functions in Sass to style text and backgrounds, what is the best practice to maintain accessibility?

A Avoid using these functions and stick to black and white colors only.

B Use complement and invert colors without testing because they always provide good contrast.

C Only use invert colors for backgrounds and complement colors for text.

D Always check color contrast ratios to ensure text is readable against backgrounds.

💡 Hint

Think about users with vision impairments and color blindness.

Complement and invert colors can sometimes produce poor contrast. Checking contrast ratios ensures text is readable and accessible to all users.

Practice

1. What does the complement() function in Sass do to a color?

easy

A. It returns the opposite color on the color wheel.

B. It inverts the RGB values of the color.

C. It makes the color lighter by 50%.

D. It changes the color to grayscale.

Solution

1. Step 1: Understand the complement function

   The complement() function returns the color opposite on the color wheel, creating contrast.

2. Step 2: Differentiate from invert function

   The invert() function flips RGB values, not the color wheel position.

3. Final Answer:

   It returns the opposite color on the color wheel. -> Option A

4. Quick Check:

   Complement = opposite color on wheel [OK]

Hint: Complement = opposite color on wheel, invert = flips RGB [OK]

Common Mistakes:

• Confusing complement with invert function
• Thinking complement changes brightness
• Assuming complement makes grayscale

2. Which of the following is the correct syntax to complement a color $color in Sass?

easy

A. invert($color)

B. invert-color($color)

C. complement($color)

D. color-invert($color)

Solution

1. Step 1: Recall Sass complement function syntax

   The correct function to complement colors in Sass is complement() with the color as argument.

2. Step 2: Check other options

   invert() does not exist as built-in, others are invalid function names.

3. Final Answer:

   complement($color) -> Option C

4. Quick Check:

   complement() is the correct function name [OK]

Hint: Complement function is simply complement(color) in Sass [OK]

Common Mistakes:

• Using invert() instead of complement()
• Adding extra words like invert-color()
• Confusing function names

3. What color will be the result of complement(#000000) in Sass?

medium

A. #000000

B. #ff0000

C. #ffffff

D. #808080

Solution

1. Step 1: Understand complement function on black

   Black is #000000 (HSL 0, 0%, 0%). Complement adds 180° to hue but with 0% saturation and lightness, remains black.

2. Step 2: Confirm result

   Achromatic colors like black have complement as themselves: #000000.

3. Final Answer:

   #000000 -> Option A

4. Quick Check:

   Complement black = black (#000000) [OK]

Hint: Complement black (#000000) always gives black (#000000) [OK]

Common Mistakes:

• Thinking complement inverts to white
• Confusing complement with RGB invert
• Choosing gray (#808080) for achromatic

4. Consider this Sass code:

$color: #123456;
$comp: complement($color);
$inv: invert($color);

Which line will cause an error?

medium

A. None of the above

B. $inv: invert($color);

C. $comp: complement($color);

D. $color: #123456;

Solution

1. Step 1: Check variable assignment syntax

   $color: #123456; uses correct Sass syntax.

2. Step 2: Verify complement usage

   complement($color) is a valid built-in Sass function.

3. Step 3: Check invert

   invert($color) causes error: no built-in invert() function (requires @use 'sass:color' as color; color.invert($color)).

4. Final Answer:

   $inv: invert($color); -> Option B

5. Quick Check:

   invert() undefined without module [OK]

Hint: invert() not built-in like complement() [OK]

Common Mistakes:

• Thinking invert() is valid like complement()
• Assuming intuitive function names exist
• Overlooking module requirements for newer functions

5. You want to create a button with a background color $btn-color and text color that is the complement of $btn-color. Which Sass code correctly sets the text color?

hard

A. color: invert($btn-color);

B. color: darken($btn-color, 50%);

C. color: lighten($btn-color, 50%);

D. color: complement($btn-color);

Solution

1. Step 1: Identify the goal

   The text color should be the complement of the button background color for contrast.

2. Step 2: Choose the correct function

   complement() returns the opposite color on the color wheel, ideal for contrast.

3. Step 3: Exclude other options

   invert() not built-in; lighten/darken adjust brightness, not hue.

4. Final Answer:

   color: complement($btn-color); -> Option D

5. Quick Check:

   Complement gives opposite color for readable text [OK]

Hint: Use complement() for opposite color, perfect for text contrast [OK]

Common Mistakes:

• Using invert() expecting perfect contrast
• Lighten or darken changes brightness, not hue
• Confusing complement with invert