Mix function for blending in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mix red and blue colors equally using the mix function.

SASS

$color: mix(red, blue, [1]);

Drag options to blanks, or click blank then click option'

A50%

B25%

C75%

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100% mixes only the first color, no blending.

Using 25% or 75% creates uneven blends.

The mix function blends two colors. Using 50% mixes them equally.

2fill in blank

medium

Complete the code to mix green and yellow with 30% weight on green.

SASS

$color: mix(green, yellow, [1]);

Drag options to blanks, or click blank then click option'

A30%

B70%

C50%

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the percentage as the amount of the second color.

Using 70% would make green dominant, not 30%.

Using 30% means green is 30% and yellow is 70% in the mix.

3fill in blank

hard

Fix the error in the mix function usage to blend black and white with 40% black.

SASS

$color: mix(black, white, [1]);

Drag options to blanks, or click blank then click option'

A40

B40%

C0.4

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the % sign causes errors.

Using decimal numbers instead of percentages.

The weight must be a percentage string like 40%, not a number or decimal.

4fill in blank

hard

Fill both blanks to mix orange and purple with 60% orange and 40% purple.

SASS

$color: mix([1], [2], 60%);

Drag options to blanks, or click blank then click option'

Aorange

Bpurple

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the colors changes the mix result.

Using unrelated colors like red or blue here.

The first color is orange, the second is purple, and the weight is 60% for orange.

5fill in blank

hard

Fill all three blanks to create a variable $blend that mixes navy and teal with 25% navy.

SASS

$blend: mix([1], [2], [3]);

Drag options to blanks, or click blank then click option'

Anavy

Bteal

C25%

D75%

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of colors.

Using 75% instead of 25% for the weight.

The first color is navy, second is teal, and the weight is 25% for navy.