Why programmatic color control matters in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a primary color variable in Sass.

SASS

$primary-color: [1];

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

A#3498db

Bprimary-color

Ccolor-primary

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of color values.

Forgetting the # in hex codes.

The correct way to define a color variable in Sass is to assign a valid color value like a hex code.

2fill in blank

medium

Complete the code to lighten the primary color by 20%.

SASS

$light-primary: lighten($primary-color, [1]);

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

A40%

B20%

C30%

D10%

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers without % sign.

Using too large or too small percentages.

The lighten() function in Sass takes a color and a percentage to lighten it. Here, 20% is the correct amount.

3fill in blank

hard

Fix the error in the code to correctly darken the secondary color by 15%.

SASS

$dark-secondary: darken($secondary-color, [1]);

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

Afifteen%

B15

C0.15

D15%

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the % sign.

Using decimal numbers instead of percentages.

The darken() function requires a percentage value with the % sign, like 15%.

4fill in blank

hard

Fill both blanks to create a map of colors with keys and values.

SASS

$colors: ([1]: $primary-color, [2]: $secondary-color);

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

Aprimary

Bmain

Csecondary

Daccent

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-descriptive or incorrect keys.

Mixing up keys and values.

In a Sass map, keys like 'primary' and 'secondary' label the colors clearly.

5fill in blank

hard

Fill all three blanks to access the primary color from the map and lighten it by 10%.

SASS

$primary-light: lighten(map-get($colors, [1]), [2]); // [3]

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

Aaccent

B10%

Clighten

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keys like 'accent' instead of 'primary'.

Forgetting the % sign in the percentage.

Confusing function names.

Use 'primary' as the key to get the color, '10%' to lighten by ten percent, and 'lighten' is the function used.