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

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

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

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

Hint

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

Practice

1. What does the mix() function in Sass do?

easy

A. It converts a color to grayscale.

B. It creates a gradient between two colors.

C. It changes the opacity of a color.

D. It blends two colors into a new color based on a weight.

Solution

1. Step 1: Understand the purpose of mix()

   The mix() function combines two colors into one by blending them.

2. Step 2: Recognize the role of the weight parameter

   The weight controls how much of each color is used in the blend, creating a new color.

3. Final Answer:

   It blends two colors into a new color based on a weight. -> Option D

4. Quick Check:

   mix() blends colors = It blends two colors into a new color based on a weight. [OK]

Hint: Remember mix() blends colors using weight [OK]

Common Mistakes:

• Confusing mix() with gradient creation
• Thinking mix() changes opacity only
• Assuming mix() converts colors to grayscale

2. Which of the following is the correct syntax to blend 70% red with 30% blue using mix() in Sass?

easy

A. mix(red, blue, 70%)

B. mix(blue, red, 30%)

C. mix(red, blue, 70)

D. mix(red, blue weight: 70%)

Solution

1. Step 1: Identify the correct parameter order

   The mix() function takes two colors first, then the weight as a percentage.

2. Step 2: Confirm the weight meaning

   The weight is the percentage of the first color in the blend, so 70% means mostly red.

3. Final Answer:

   mix(red, blue, 70%) -> Option A

4. Quick Check:

   mix(color1, color2, weight%) = mix(red, blue, 70%) [OK]

Hint: Weight is percent of first color in mix() [OK]

Common Mistakes:

• Swapping color order and weight
• Using decimal instead of percentage
• Adding named parameters incorrectly

3. What color will result from mix(#ff0000, #0000ff, 50%) in Sass?

medium

A. #800080 (purple)

B. #ff007f (pinkish red)

C. #7f007f (dark purple)

D. #000080 (navy blue)

Solution

1. Step 1: Understand the colors and weight

   #ff0000 is red, #0000ff is blue, and 50% weight means equal parts.

2. Step 2: Calculate the blend

   mix() calculates the weighted average of RGB channels. For 50%, it averages red (255,0,0) and blue (0,0,255) to (127.5,0,127.5), which rounds to #7f007f (dark purple), not #800080.

3. Step 3: Correct hex code

   The actual result is #7f007f, which is dark purple, not #800080.

4. Final Answer:

   #7f007f (dark purple) -> Option C

5. Quick Check:

   mix(#ff0000, #0000ff, 50%) = #7f007f [OK]

Hint: mix() averages RGB channels weighted by percentage [OK]

Common Mistakes:

• Confusing hex codes for purple shades
• Assuming pink or navy instead of purple
• Ignoring equal weight meaning

4. Identify the error in this Sass code:

color: mix(red, blue 50%);

medium

A. Missing comma between blue and 50%

B. Weight must be a decimal, not percentage

C. Colors must be variables, not keywords

D. mix() cannot blend red and blue

Solution

1. Step 1: Check the function syntax

   The mix() function requires commas between arguments.

2. Step 2: Spot the missing comma

   Between blue and 50% there is no comma, causing a syntax error.

3. Final Answer:

   Missing comma between blue and 50% -> Option A

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Check commas between all mix() arguments [OK]

Common Mistakes:

• Omitting commas between parameters
• Using decimal instead of percentage incorrectly
• Thinking color keywords are invalid

5. You want to create a button background color that is 30% green and 70% yellow using mix(). Which code snippet achieves this correctly?

hard

A. background-color: mix(green, yellow, 60%);

B. background-color: mix(yellow, green, 70%);

C. background-color: mix(green, yellow, 70%);

D. background-color: mix(yellow, green, 30%);

Solution

1. Step 1: Understand weight meaning in mix()

   The weight is the percentage of the first color in the blend.

2. Step 2: Match desired color proportions

   To get 30% green and 70% yellow, yellow must be first with 70% weight.

3. Final Answer:

   background-color: mix(yellow, green, 70%); -> Option B

4. Quick Check:

   Weight = first color percent [OK]

Hint: First color gets the weight percent in mix() [OK]

Common Mistakes:

• Swapping colors and weights
• Assuming weight is second color percent
• Using wrong percentage values