Spacing utility generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a SASS variable for base spacing.

SASS

$base-spacing: [1];

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

A100%

B10px

C5em

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixels instead of relative units.

Using percentage which is not typical for spacing variables.

The base spacing is commonly set using relative units like rem for scalability.

2fill in blank

medium

Complete the mixin to generate margin utilities for all sides.

SASS

@mixin margin-[1]($size) {
  margin-[1]: $size;
}

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

Abottom

Bleft

Ctop

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using a side that does not match the intended utility.

Confusing margin with padding.

The mixin is designed to create margin utilities for a specific side, here starting with top.

3fill in blank

hard

Fix the error in the loop that generates margin utilities for all sides.

SASS

@each $side in top, right, bottom, [1] {
  .m-#{$side} {
    margin-#{$side}: $base-spacing;
  }
}

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

Aleft

Bmiddle

Ccenter

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent CSS sides like center or middle.

Omitting one of the four sides.

The four sides in CSS are top, right, bottom, and left. The loop must include left to cover all sides.

4fill in blank

hard

Fill both blanks to create padding utilities with variable sizes.

SASS

@each $side in [1] {
  @each $size in [2] {
    .p-#{$side}-#{$size} {
      padding-#{$side}: $size * $base-spacing;
    }
  }
}

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

Atop, right, bottom, left

Bsmall, medium, large

C1, 2, 3

Dx, y, z

Attempts:

3 left

💡 Hint

Common Mistakes

Using descriptive size names instead of numeric multipliers.

Using invalid side names.

The first blank needs the four sides for padding. The second blank is a list of numeric multipliers for spacing sizes.

5fill in blank

hard

Fill all three blanks to generate margin utilities with responsive breakpoints.

SASS

@each $breakpoint in [1] {
  @each $side in [2] {
    .m-#{$side}-#{$breakpoint} {
      margin-#{$side}: map-get($spacing-map, $breakpoint) * [3];
    }
  }
}

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

Amobile, tablet, desktop

Btop, bottom, left, right

C$base-spacing

D1rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid breakpoint names.

Using fixed units instead of variables for spacing.

The first blank is a list of breakpoints. The second blank is the four sides. The third blank is the base spacing variable used for multiplication.