Design token management in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a color token 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 a variable name as the value instead of a color code.

Using plain color names without quotes or hash.

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

2fill in blank

medium

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

SASS

button {
  background-color: [1];
}

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

A#primary-color

B$primary-color

Cprimary-color

Dprimary-color()

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dollar sign when using the variable.

Trying to call the variable like a function.

To use a Sass variable inside a CSS rule, prefix it with $ like $primary-color.

3fill in blank

hard

Fix the error in the token map definition by completing the blank.

SASS

$colors: (
  primary: [1],
  secondary: #2ecc71
);

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

A$primary-color

Bprimary-color

C#primary-color

DprimaryColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without the dollar sign inside maps.

Trying to use camelCase variable names not defined.

When referencing a variable inside a Sass map, use the variable name with the dollar sign, like $primary-color.

4fill in blank

hard

Fill both blanks to access the primary color from the map and use it in a CSS rule.

SASS

button {
  background-color: map-get([1], [2]);
}

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

A$colors

Bprimary

Csecondary

D$primary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the color variable directly instead of the map.

Using quotes around the key name.

Use map-get($colors, primary) to get the primary color from the map.

5fill in blank

hard

Fill all three blanks to create a map of font sizes and use the medium size in a CSS rule.

SASS

$font-sizes: (
  small: [1],
  medium: [2],
  large: [3]
);

p {
  font-size: map-get($font-sizes, medium);
}

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

A0.875rem

B1rem

C1.25rem

D1.5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using px units instead of rem.

Assigning sizes in wrong order.

Define font sizes with rem units for small, medium, and large. Medium is 1rem, small is smaller, large is bigger.