Spacing scale generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass spacing scale?

Given the Sass code below, what is the generated CSS for the .spacing-3 class?

$spacing-scale: (0, 0.25rem, 0.5rem, 1rem, 2rem);
.spacing-3 {
  margin: nth($spacing-scale, 4);
}

SASS

$spacing-scale: (0, 0.25rem, 0.5rem, 1rem, 2rem);
.spacing-3 {
  margin: nth($spacing-scale, 4);
}

A .spacing-3 { margin: 1rem; }

B .spacing-3 { margin: 0.5rem; }

C .spacing-3 { margin: 2rem; }

D .spacing-3 { margin: 0.25rem; }

💡 Hint

Remember that nth() starts counting from 1 in Sass lists.

The $spacing-scale list has values indexed from 1 to 5. The 4th value is 1rem, so margin: nth($spacing-scale, 4); outputs margin: 1rem;.

🧠 Conceptual

intermediate

How does Sass map spacing scale keys to values?

Consider this Sass map:

$spacing-map: (
  small: 0.5rem,
  medium: 1rem,
  large: 2rem
);

Which Sass function correctly retrieves the value for medium?

A get($spacing-map, 'medium')

B map-get($spacing-map, medium)

C map-get($spacing-map, 'medium')

D nth($spacing-map, 2)

💡 Hint

Map keys are strings or identifiers and need quotes if strings.

The map-get() function retrieves a value by key from a Sass map. Since medium is an identifier key, it is accessed without quotes. Option B is correct.

❓ selector

advanced

Which selector applies spacing scale with Sass @each loop?

Given this Sass code:

$spacing-scale: (0, 0.25rem, 0.5rem, 1rem);

@each $space in $spacing-scale {
  .m-#{$space} {
    margin: $space;
  }
}

What is the correct CSS output for the class .m-0.5rem?

A .m-05rem { margin: 0.5rem; }

B .m-0.5rem { margin: 0.5rem; }

C .m-0\.5rem { margin: 0.5rem; }

D .m-0_5rem { margin: 0.5rem; }

💡 Hint

CSS class names cannot contain unescaped dots.

Sass escapes the dot in 0.5rem when used in selectors, so the class becomes .m-0\.5rem in CSS. This is the valid selector.

❓ layout

advanced

How to create a responsive spacing scale with Sass and CSS variables?

Which Sass snippet correctly generates CSS variables for spacing scale that change at a breakpoint?

$spacing-scale: (0: 0, 1: 0.5rem, 2: 1rem);

:root {
  @each $key, $value in $spacing-scale {
    --space-#{$key}: #{$value};
  }
}

@media (min-width: 40rem) {
  :root {
    --space-1: 1rem;
    --space-2: 2rem;
  }
}

A Generates invalid CSS variables due to wrong syntax

B Generates fixed spacing variables without media query effect

C Generates spacing variables but media query overrides are ignored

D Generates CSS variables for spacing that update at 40rem breakpoint

💡 Hint

CSS variables can be redefined inside media queries for responsiveness.

The Sass code creates CSS variables for spacing in :root and redefines some inside a media query at 40rem. This allows spacing to adapt responsively.

❓ accessibility

expert

How to ensure spacing scale changes do not break accessibility?

When generating spacing scales in Sass for margins and paddings, which practice best supports accessibility and user preferences?

A Use CSS variables with rem units and allow user zoom and font scaling

B Hardcode spacing values in pixels inside media queries

C Use px units for precise control over spacing

D Use fixed rem values only, ignoring user browser settings

💡 Hint

Accessibility benefits from scalable units and respecting user settings.

Using rem units with CSS variables allows spacing to scale with user font size preferences and zoom, improving accessibility. Fixed px values ignore user settings and can cause layout issues.