sass:color module - Mini Project: Build & Apply

Using the sass:color Module to Manipulate Colors

📖 Scenario: You are designing a simple webpage theme. You want to start with a base color and create lighter and darker versions of it for backgrounds and buttons.

🎯 Goal: Build a Sass stylesheet that defines a base color, sets a light and dark variant using the sass:color module functions, and applies these colors to page elements.

📋 What You'll Learn

Use the sass:color module functions lighten() and darken()

Create variables for base color, light color, and dark color

Apply these colors to CSS selectors for background and text

Use valid Sass syntax with module import

💡 Why This Matters

🌍 Real World

Web designers often need to create color themes with consistent variations for UI elements. Using sass:color functions helps automate this process.

💼 Career

Knowing how to manipulate colors programmatically with Sass is valuable for front-end developers and UI designers to build maintainable and scalable stylesheets.

1

Import the sass:color module and create a base color variable

Write @use "sass:color"; at the top. Then create a variable called $base-color and set it to #3498db (a blue shade).

SASS

@use "sass:color";

// Create $base-color variable with value #3498db
// Your code here

Hint

Remember to use @use to import the module before using its functions.

2

Create light and dark color variables using sass:color functions

Create a variable $light-color by calling color.lighten($base-color, 20%). Create another variable $dark-color by calling color.darken($base-color, 20%).

SASS

@use "sass:color";

$base-color: #3498db;

// Create $light-color by lightening $base-color by 20%
// Create $dark-color by darkening $base-color by 20%
// Your code here

Hint

Use the color.lighten() and color.darken() functions with the correct percentage.

3

Apply the colors to CSS selectors

Write CSS rules for body with background color $light-color, for h1 with color $dark-color, and for button with background color $base-color and white text color.

SASS

@use "sass:color";

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

// Add CSS rules for body, h1, and button using the color variables
// Your code here

Hint

Use the variables inside the CSS rules exactly as named.

4

Add a hover effect to the button using sass:color.darken()

Add a button:hover rule that changes the background color to color.darken($base-color, 10%).

SASS

@use "sass:color";

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

body {
  background-color: $light-color;
}

h1 {
  color: $dark-color;
}

button {
  background-color: $base-color;
  color: white;
}

// Add button:hover rule with darkened background color
// Your code here

Hint

Use the color.darken() function inside the hover rule exactly as shown.