Color scale generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

SASS

$base-color: [1];

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

AbaseColor

Bblue

C#3498db

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a color value.

Using a color name without quotes or hash (#).

The base color is defined as a hex color code #3498db, which is a shade of blue. This is the correct way to assign a color value in Sass.

2fill in blank

medium

Complete the code to create a lighter shade of the base color using Sass's lighten function.

SASS

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

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

A10

B10%

C0.1

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number without the % sign.

Using a decimal instead of a percentage.

The lighten function in Sass takes a color and a percentage value to lighten it. The percentage must include the % sign, like 10%.

3fill in blank

hard

Fix the error in the code to generate a color scale with 5 steps using a loop.

SASS

@for $i from 1 through 5 {
  $shade-[1]: lighten($base-color, $i * 10%);
}

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

A$i

B#i

Ci

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without the $ sign.

Using an invalid variable name like #i.

In Sass loops, variables must be prefixed with $. So $i is correct to use inside the loop.

4fill in blank

hard

Fill both blanks to create a map of color shades with keys from 1 to 5 and values as lighter colors.

SASS

$color-scale: (
  [1]: lighten($base-color, 10%),
  [2]: lighten($base-color, 20%)
);

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

A1

Blighten

C2

Ddarken

Attempts:

3 left

💡 Hint

Common Mistakes

Using function names as keys instead of numbers.

Using darken instead of lighten for lighter shades.

The keys in the map are numbers representing shade steps: 1 and 2. The values are lighter colors using the lighten function already in the code.

5fill in blank

hard

Fill all three blanks to generate a full color scale map with keys 1 to 3 and values as lighter shades increasing by 15%.

SASS

$full-scale: (
  [1]: lighten($base-color, 15%),
  [2]: lighten($base-color, 30%),
  [3]: lighten($base-color, 45%)
);

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

A1

B2

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that do not match the number of shades.

Using numbers outside the range 1 to 3.

The map keys are 1, 2, and 3 to represent each shade step. The lighten percentages increase by 15% for each step.