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.