Lighten and darken functions in SASS - Mini Project: Build & Apply

Lighten and Darken Colors with Sass

📖 Scenario: You are creating a simple style sheet for a website. You want to use Sass functions to make colors lighter or darker easily. This helps keep your design consistent and easy to update.

🎯 Goal: Build a Sass file that defines a base color, sets a percentage for lightening and darkening, then uses the lighten() and darken() functions to create lighter and darker color variants. Finally, apply these colors to CSS classes.

📋 What You'll Learn

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

Create a variable $change-percent with the exact value 20%

Use the lighten() function with $base-color and $change-percent to create $light-color

Use the darken() function with $base-color and $change-percent to create $dark-color

Create CSS classes .light and .dark that use $light-color and $dark-color as background colors respectively

💡 Why This Matters

🌍 Real World

Designers and developers often need to create color palettes with consistent light and dark shades for buttons, backgrounds, and themes.

💼 Career

Knowing how to use Sass functions like lighten() and darken() helps you write maintainable and scalable CSS for professional web projects.

1

Create the base color variable

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

SASS

# Create the base color variable
# Your code here

Need a hint?

Use $base-color: #3498db; to define the color variable.

2

Create the percentage variable for color change

Create a Sass variable called $change-percent and set it to 20%.

SASS

$base-color: #3498db;
# Create the percentage variable for lightening and darkening
# Your code here

Need a hint?

Use $change-percent: 20%; to define the percentage variable.

3

Create lighter and darker color variables using lighten() and darken()

Create a variable $light-color using lighten($base-color, $change-percent) and a variable $dark-color using darken($base-color, $change-percent).

SASS

$base-color: #3498db;
$change-percent: 20%;
# Create $light-color using lighten() and $dark-color using darken()
# Your code here

Need a hint?

Use lighten($base-color, $change-percent) and darken($base-color, $change-percent) to create the new color variables.

4

Apply the colors to CSS classes

Create CSS classes .light and .dark. Set the background color of .light to $light-color and the background color of .dark to $dark-color.

SASS

$base-color: #3498db;
$change-percent: 20%;
$light-color: lighten($base-color, $change-percent);
$dark-color: darken($base-color, $change-percent);

/* Create .light and .dark classes with background colors */
# Your code here

Need a hint?

Use .light { background-color: $light-color; } and .dark { background-color: $dark-color; } to style the classes.