Saturate and desaturate in SASS - Mini Project: Build & Apply

Saturate and Desaturate Colors with Sass

📖 Scenario: You are designing a simple webpage with colored boxes. You want to learn how to make colors more vivid or more muted using Sass color functions.

🎯 Goal: Create a Sass stylesheet that defines a base color and then uses saturate() and desaturate() functions to create two new colors. Apply these colors to three boxes in HTML to see the effect visually.

📋 What You'll Learn

Define a base color variable in Sass

Create a saturated color by increasing saturation of the base color

Create a desaturated color by decreasing saturation of the base color

Use semantic HTML with three section elements for the colored boxes

Apply the colors to the boxes using CSS classes

Include responsive design so boxes stack on small screens

Use accessible color contrast for text inside boxes

💡 Why This Matters

🌍 Real World

Designers and developers often need to adjust colors dynamically to create visually appealing and accessible websites. Using Sass functions like saturate and desaturate helps maintain consistent color schemes.

💼 Career

Understanding Sass color functions and responsive design is essential for front-end developers and UI designers to build modern, accessible, and maintainable web interfaces.

1

Set up base color variable in Sass

Create a Sass variable called $base-color and set it to #3498db (a blue shade).

SASS

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

Need a hint?

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

2

Create saturated and desaturated color variables

Create two new Sass variables: $more-saturated by saturating $base-color by 30%, and $less-saturated by desaturating $base-color by 30%. Use the saturate() and desaturate() functions.

SASS

$base-color: #3498db;
// Create $more-saturated by saturating $base-color by 30%
// Create $less-saturated by desaturating $base-color by 30%
// Your code here

Need a hint?

Use saturate($color, 30%) and desaturate($color, 30%) to adjust saturation.

3

Write CSS classes to apply the colors

Write three CSS classes: .box-base with background $base-color, .box-saturated with background $more-saturated, and .box-desaturated with background $less-saturated. Set text color to white and add padding and margin for visibility.

SASS

$base-color: #3498db;
$more-saturated: saturate($base-color, 30%);
$less-saturated: desaturate($base-color, 30%);

// Write .box-base, .box-saturated, and .box-desaturated classes with background colors and styling
// Your code here

Need a hint?

Use background-color: $variable; inside each class and add color: white; for text.

4

Add HTML structure and responsive layout

Write HTML with three section elements with classes box-base, box-saturated, and box-desaturated. Each box should have text describing the color. Add a container main with a CSS flex layout that stacks boxes vertically on narrow screens and horizontally on wider screens.

SASS

$base-color: #3498db;
$more-saturated: saturate($base-color, 30%);
$less-saturated: desaturate($base-color, 30%);

.box-base {
  background-color: $base-color;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}
.box-saturated {
  background-color: $more-saturated;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}
.box-desaturated {
  background-color: $less-saturated;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}

/* Add HTML and container styles below */
// Your code here

Need a hint?

Use semantic section tags with the correct classes and a main container with flexbox and a media query for responsiveness.