Color values and manipulation in SASS - Mini Project: Build & Apply

Color Values and Manipulation with Sass

📖 Scenario: You are designing a simple webpage with a colored box. You want to use Sass to manage colors easily and create a lighter shade of your main color for a hover effect.

🎯 Goal: Build a Sass stylesheet that defines a base color variable, creates a lighter version of that color, and applies these colors to a box and its hover state.

📋 What You'll Learn

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

Create a Sass variable named $light-color that is a lighter version of $base-color by 30%.

Write a CSS rule for a class .color-box that sets the background color to $base-color.

Add a :hover state for .color-box that changes the background color to $light-color.

💡 Why This Matters

🌍 Real World

Using variables and color functions in Sass helps keep your website colors consistent and easy to update.

💼 Career

Front-end developers often use Sass to manage styles efficiently, especially for color themes and interactive effects.

1

Define the base color variable

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

SASS

# Define the base color variable
# Your code here

Need a hint?

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

2

Create a lighter color variable

Create a Sass variable called $light-color that is a lighter version of $base-color by 30% using the lighten() function.

SASS

$base-color: #3498db;
# Create a lighter color variable called $light-color
# Your code here

Need a hint?

Use lighten($color, percentage) to make a color lighter.

3

Style the color box with base color

Write a CSS rule for the class .color-box that sets the background-color property to the Sass variable $base-color.

SASS

$base-color: #3498db;
$light-color: lighten($base-color, 30%);

# Write CSS for .color-box with background-color $base-color
# Your code here

Need a hint?

Use .class-name { property: value; } syntax and refer to variables with $variable-name.

4

Add hover effect with lighter color

Add a :hover state to the .color-box CSS rule that changes the background-color to the Sass variable $light-color.

SASS

$base-color: #3498db;
$light-color: lighten($base-color, 30%);

.color-box {
  background-color: $base-color;
  
  # Add :hover state to change background-color to $light-color
  # Your code here
}

Need a hint?

Use &:hover { ... } inside the class rule to add hover styles in Sass.