Adjust-hue for color rotation in SASS - Mini Project: Build & Apply

Adjust Hue for Color Rotation with Sass

📖 Scenario: You are creating a simple webpage with a colored box. You want to change the color of the box by rotating its hue using Sass. This will help you understand how to use the adjust-hue function to shift colors.

🎯 Goal: Build a Sass stylesheet that defines a base color variable and uses adjust-hue to create a rotated color. Apply these colors to two boxes so you can see the original and the hue-rotated colors side by side.

📋 What You'll Learn

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

Create a Sass variable called $rotated-color that uses adjust-hue to rotate $base-color by 90 degrees.

Write CSS rules for two classes: .box-original and .box-rotated.

Apply $base-color as the background color for .box-original.

Apply $rotated-color as the background color for .box-rotated.

Set both boxes to have width and height of 8rem and margin of 1rem.

💡 Why This Matters

🌍 Real World

Adjusting hues is useful in design systems to create color variations without picking new colors manually. It helps keep a consistent look with different moods or themes.

💼 Career

Web developers and designers often use Sass and color functions like adjust-hue to efficiently manage colors in websites and apps, improving maintainability and creativity.

1

Create the base color variable

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

SASS

# Create the base color variable
# Your code here

Need a hint?

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

2

Create the rotated color variable using adjust-hue

Create a Sass variable called $rotated-color that uses adjust-hue($base-color, 90deg) to rotate the hue of $base-color by 90 degrees.

SASS

$base-color: #3498db;
# Create the rotated color variable using adjust-hue
# Your code here

Need a hint?

Use the adjust-hue(color, degrees) function to rotate the hue.

3

Write CSS rules for the original and rotated boxes

Write CSS rules for classes .box-original and .box-rotated. Set the background color of .box-original to $base-color and the background color of .box-rotated to $rotated-color. Also set width and height to 8rem and margin to 1rem for both classes.

SASS

$base-color: #3498db;
$rotated-color: adjust-hue($base-color, 90deg);

// Write CSS rules for .box-original and .box-rotated
// Your code here

Need a hint?

Use the syntax .class-name { property: value; } to write CSS rules in Sass.

4

Add a container class for layout and complete the stylesheet

Add a CSS rule for a class called .container that uses Flexbox to display its children side by side with a gap of 1rem. This will help show the two boxes next to each other. Use display: flex; and gap: 1rem; inside the .container rule.

SASS

$base-color: #3498db;
$rotated-color: adjust-hue($base-color, 90deg);

.box-original {
  background-color: $base-color;
  width: 8rem;
  height: 8rem;
  margin: 1rem;
}

.box-rotated {
  background-color: $rotated-color;
  width: 8rem;
  height: 8rem;
  margin: 1rem;
}

// Add .container class with flex layout
// Your code here

Need a hint?

Flexbox helps arrange items side by side. Use display: flex; and gap to add space between them.