Spacing scale generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

SASS

$base-spacing: [1];

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

A1rem

B10px

C5em

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute units like px which don't scale well.

Using percentage which is not typical for spacing base.

The base spacing is commonly set using rem units for scalability and accessibility.

2fill in blank

medium

Complete the code to create a Sass map for spacing scale with key 'small'.

SASS

$spacing-scale: (small: [1]);

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

A0.5rem

B2rem

C10px

D5em

Attempts:

3 left

💡 Hint

Common Mistakes

Using larger values for 'small' spacing.

Mixing units inconsistently.

The 'small' spacing is often half the base spacing, here 0.5rem.

3fill in blank

hard

Fix the error in the Sass function that returns spacing by key.

SASS

@function get-spacing($key) {
  @return map-get($spacing-scale, [1]);
}

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

Akey

B$key

C'key'

D"key"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name, making it a string literal.

Omitting the dollar sign for the variable.

The function parameter $key must be used as a variable without quotes to access the map value.

4fill in blank

hard

Fill both blanks to generate a spacing scale map with keys 'small' and 'medium'.

SASS

$spacing-scale: (small: [1], medium: [2]);

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

A0.5rem

B1rem

C2rem

D5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value for both keys.

Using inconsistent units.

The 'small' spacing is 0.5rem and 'medium' spacing is 2rem for a clear scale difference.

5fill in blank

hard

Fill all three blanks to create a Sass map with keys 'small', 'medium', and 'large' using a spacing scale.

SASS

$spacing-scale: (small: [1], medium: [2], large: [3]);

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

A0.25rem

B1rem

C2rem

D4rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using values that do not increase logically.

Mixing units or inconsistent spacing.

The scale starts at 0.25rem for small, 1rem for medium, and 4rem for large spacing to create a clear progression.