Complement and invert functions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to invert the color variable.

SASS

$inverted-color: invert([1]);

Drag options to blanks, or click blank then click option'

Ainvert

Bcolor

C$color

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dollar sign before the variable name.

Passing a string instead of a variable.

The invert() function takes a color value as input. Here, $color is the variable holding the original color.

2fill in blank

medium

Complete the code to get the complement of the color.

SASS

$complement-color: complement([1]);

Drag options to blanks, or click blank then click option'

Acolor

Binvert

Ccomplement

D$color

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the function name instead of the variable.

Omitting the dollar sign.

The complement() function requires a color variable. Use $color to pass the color value.

3fill in blank

hard

Fix the error in the code to invert the background color.

SASS

background-color: invert([1]);

Drag options to blanks, or click blank then click option'

Abackground

B$background-color

Cbackground-color

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of variables.

Forgetting the dollar sign.

The invert() function needs a color variable. Here, $background-color is the correct variable name.

4fill in blank

hard

Fill both blanks to create a class that sets text color to the complement of the base color.

SASS

.text-complement { color: [1]([2]); }

Drag options to blanks, or click blank then click option'

Acomplement

B$base-color

Cinvert

D$text-color

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping function and variable positions.

Using invert instead of complement.

The complement() function is used to get the opposite color. We pass $base-color as the input variable.

5fill in blank

hard

Fill all three blanks to define a mixin that sets background to the inverted complement of a color.

SASS

@mixin invert-complement($color) { background-color: [1]([2]([3])); }

Drag options to blanks, or click blank then click option'

Ainvert

Bcomplement

C$color

D$background

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of functions.

Using the wrong variable name.

The mixin uses invert() on the result of complement() applied to $color.

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