Complement and invert functions in SASS - Mini Project: Build & Apply

Using Complement and Invert Functions in Sass

📖 Scenario: You are creating a simple style for a website section that uses colors. You want to learn how to use Sass color module functions to get the complement and invert of colors to make your design more dynamic and interesting.

🎯 Goal: Build a Sass stylesheet that defines a base color, then creates two new colors using the color.complement() and color.invert() functions. Use these colors to style a section background and text color.

📋 What You'll Learn

Create a Sass variable called $base-color with the exact value #3498db.

Create a Sass variable called $complement-color that uses color.complement($base-color).

Create a Sass variable called $invert-color that uses color.invert($base-color).

Style a section element with background-color set to $base-color and color set to $invert-color.

Add a p inside the section with color set to $complement-color.

💡 Why This Matters

🌍 Real World

Designers and developers often need to create color schemes that are visually appealing and accessible. Using Sass functions like color.complement() and color.invert() helps automate color choices and maintain consistency.

💼 Career

Knowing how to use Sass color functions is useful for front-end developers and UI designers to create dynamic and maintainable stylesheets.

1

Create the base color variable

Create a Sass variable called $base-color and set it to the color #3498db.

SASS

$base-color: #3498db;
// Your code here

Hint

Use the syntax $variable-name: value; to create a Sass variable.

2

Create complement and invert color variables

First, add @use 'sass:color'; at the top. Then create a Sass variable called $complement-color that uses color.complement($base-color). Then create a Sass variable called $invert-color that uses color.invert($base-color).

SASS

$base-color: #3498db;
// Add @use 'sass:color';
// Create $complement-color using color.complement($base-color)
// Create $invert-color using color.invert($base-color)

Hint

Add @use 'sass:color'; at the top. Then use color.complement($base-color) and color.invert($base-color) to get new colors.

3

Style the section with base and invert colors

Write a Sass style for the section element that sets background-color to $base-color and color to $invert-color.

SASS

@use 'sass:color';
$base-color: #3498db;
$complement-color: color.complement($base-color);
$invert-color: color.invert($base-color);

section {
  // Set background-color and color here
}

Hint

Use the syntax selector { property: value; } to style elements in Sass.

4

Add paragraph style with complement color

Inside the section style, add a style for the p element that sets its color to $complement-color.

SASS

@use 'sass:color';
$base-color: #3498db;
$complement-color: color.complement($base-color);
$invert-color: color.invert($base-color);

section {
  background-color: $base-color;
  color: $invert-color;
  
  // Add p color style here
}

Hint

Use nested selectors in Sass by writing the child selector inside the parent block.

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