Token-driven color palettes in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a color token variable for primary color.

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 color codes.

The correct way to define a color token variable is to assign a valid color value like #3498db to the variable.

2fill in blank

medium

Complete the code to use the primary color token in a CSS rule.

SASS

button {
  background-color: [1];
}

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

A$primary

Bprimary

Cprimary-color

D$primary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign before the variable name.

Using incorrect variable names.

To use a Sass variable, prefix it with $. The variable name is $primary-color.

3fill in blank

hard

Fix the error in the token usage to apply a lighter shade of the primary color.

SASS

button {
  background-color: lighten([1], 20%);
}

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

AprimaryColor

Bprimary-color

C$primary-color

Dcolor-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $ inside functions.

Misspelling the variable name.

The lighten() function requires a valid color variable with the $ prefix. So $primary-color is correct.

4fill in blank

hard

Fill both blanks to create a token-driven palette map with primary and secondary colors.

SASS

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

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

A$primary-color

B$secondary-color

C#2ecc71

D#e74c3c

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $.

Mixing up primary and secondary colors.

The palette map uses the primary color variable $primary-color and a direct hex value #2ecc71 for secondary color.

5fill in blank

hard

Fill all three blanks to create a function that returns a color from the palette by token name.

SASS

@function get-color($token) {
  @return map-get([1], [2]);
}

$color: get-color([3]);

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

A$color-palette

B$token

Cprimary

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using string literals instead of variables for keys.

Mixing up variable names and token names.

The function uses map-get on $color-palette with the key $token. The call passes primary as the token name.