Mix function for blending in SASS - Mini Project: Build & Apply

Mix Function for Blending Colors in Sass

📖 Scenario: You are designing a simple webpage theme. You want to create a button with a background color that is a blend of two colors. This will make the button look unique and visually appealing.

🎯 Goal: Build a Sass stylesheet that uses the mix() function to blend two colors and apply the blended color as the background of a button.

📋 What You'll Learn

Create two color variables named $color1 and $color2 with exact values #ff0000 and #0000ff respectively.

Create a variable named $blend-ratio with the value 50% to control the mix ratio.

Use the mix() function to create a new variable $blended-color that blends $color1 and $color2 using $blend-ratio.

Create a CSS rule for a button with class .blend-button that sets the background color to $blended-color.

💡 Why This Matters

🌍 Real World

Blending colors is common in web design to create smooth color transitions and unique themes.

💼 Career

Knowing how to use Sass functions like mix() helps front-end developers write cleaner, reusable styles and create visually appealing websites.

1

Create color variables

Create two Sass variables called $color1 and $color2 with the exact values #ff0000 and #0000ff respectively.

SASS

// Create $color1 and $color2 variables with #ff0000 and #0000ff
// Your code here

Need a hint?

Use $color1: #ff0000; and $color2: #0000ff; to create the variables.

2

Add blend ratio variable

Create a Sass variable called $blend-ratio and set it to 50%.

SASS

$color1: #ff0000;
$color2: #0000ff;
// Create $blend-ratio variable with 50%
// Your code here

Need a hint?

Set $blend-ratio to 50% to blend colors evenly.

3

Use mix() to blend colors

Create a Sass variable called $blended-color that uses the mix() function to blend $color1 and $color2 using $blend-ratio.

SASS

$color1: #ff0000;
$color2: #0000ff;
$blend-ratio: 50%;
// Create $blended-color using mix($color1, $color2, $blend-ratio)
// Your code here

Need a hint?

Use mix($color1, $color2, $blend-ratio) to blend the two colors.

4

Apply blended color to button

Create a CSS rule for a button with class .blend-button that sets the background-color property to $blended-color.

SASS

$color1: #ff0000;
$color2: #0000ff;
$blend-ratio: 50%;
$blended-color: mix($color1, $color2, $blend-ratio);

// Create .blend-button rule with background-color: $blended-color
// Your code here

Need a hint?

Write a CSS rule for .blend-button and set background-color to $blended-color.