Mix function for blending in SASS - Browser Rendering Trace

Render Flow - Mix function for blending

[Read SCSS file] -> [Parse variables and functions] -> [Evaluate mix() function] -> [Calculate blended color] -> [Generate CSS with blended color] -> [Browser applies CSS color]

The browser reads the SCSS file, the mix() function blends two colors by calculating a weighted average, then outputs CSS with the new color which the browser renders.

Render Steps - 5 Steps

Code Added:$color1: #ff0000;

Before

[ ] (empty box, no color)

→

After

[ ] (still empty, no visible change)

Defining a color variable does not change the visual output yet.

🔧 Browser Action:Parse variable, no repaint triggered

Code Sample

A square box with background color blended evenly between red and blue, resulting in purple.

SASS

<div class="box">Blended Color Box</div>

SASS

$color1: #ff0000;
$color2: #0000ff;
$blend: mix($color1, $color2, 50%);
.box {
  width: 10rem;
  height: 10rem;
  background-color: $blend;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 4, what color fills the box?

A Purple (blend of red and blue)

B Red (#ff0000)

C Blue (#0000ff)

D Transparent (no color)

Common Confusions - 2 Topics

Why doesn't changing the mix() weight to 0% show the first color?

At 0% weight, mix() returns the second color fully, so the box shows the second color, not the first.

💡 Remember: mix(color1, color2, 0%) equals color2; 100% equals color1.

Why does the box color look purple and not red or blue?

Because mix() blends red and blue evenly at 50%, the result is purple, a mix of both colors.

💡 Mix blends colors proportionally; equal parts create a new color in between.

Property Reference

Property	Value Applied	Effect on Color	Common Use
mix()	mix($color1, $color2, $weight)	Blends two colors by weight percentage	Create intermediate colors for gradients or themes
background-color	color value	Sets background fill color of element	Visual background styling
width / height	length units (rem)	Defines size of element box	Control element dimensions
display	flex	Enables flex container for alignment	Center content easily
align-items	center	Vertically centers flex items	Vertical alignment
justify-content	center	Horizontally centers flex items	Horizontal alignment
color	white	Sets text color	Text visibility on backgrounds
border-radius	0.5rem	Rounds corners of box	Softens box edges visually

Concept Snapshot

mix($color1, $color2, $weight) blends two colors by weight percentage. Weight 0% returns second color; 100% returns first color. Use mix() to create smooth color transitions. Apply blended color with background-color property. Flexbox centers content easily inside containers. Rounded corners soften box edges visually.

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