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.