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

Need a 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)

Need a 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
}

Need a 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
}

Need a hint?

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