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.

Practice

1. What is the main purpose of generating a spacing scale in Sass?

easy

A. To create consistent and reusable space sizes across a website

B. To change font colors dynamically

C. To add animations to elements

D. To optimize image loading speed

Solution

1. Step 1: Understand spacing scale concept

   A spacing scale is a set of predefined space sizes used consistently in design.

2. Step 2: Identify its purpose in Sass

   It helps keep spacing uniform and easy to manage by reusing values.

3. Final Answer:

   To create consistent and reusable space sizes across a website -> Option A

4. Quick Check:

   Spacing scale = consistent spacing [OK]

Hint: Spacing scale means consistent space sizes reused [OK]

Common Mistakes:

• Confusing spacing scale with color or animation features
• Thinking spacing scale changes fonts or images

2. Which Sass syntax correctly defines a map for spacing scale with keys 1, 2, 3 and values 0.25rem, 0.5rem, 1rem?

easy

A. $spacing-scale = {1: 0.25rem, 2: 0.5rem, 3: 1rem};

B. $spacing-scale: [1 => 0.25rem, 2 => 0.5rem, 3 => 1rem];

C. $spacing-scale: (1: 0.25rem, 2: 0.5rem, 3: 1rem);

D. $spacing-scale: (1 => 0.25rem, 2: 0.5rem, 3: 1rem);

Solution

1. Step 1: Recall Sass map syntax

   Sass maps use parentheses () with key: value pairs separated by commas.

2. Step 2: Check each option

   $spacing-scale: (1: 0.25rem, 2: 0.5rem, 3: 1rem); uses correct syntax with colons and parentheses. Others use invalid symbols or brackets.

3. Final Answer:

   $spacing-scale: (1: 0.25rem, 2: 0.5rem, 3: 1rem); -> Option C

4. Quick Check:

   Sass map syntax = parentheses + colon [OK]

Hint: Sass maps use (key: value) pairs inside parentheses [OK]

Common Mistakes:

• Using = instead of : for assignment
• Using square brackets [] instead of parentheses ()
• Using => instead of : for key-value pairs

3. Given this Sass code:

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

@mixin spacing($size) {
  margin: map-get($spacing-scale, $size);
}

.box {
  @include spacing(2);
}

What CSS will be generated for the .box class?

medium

A. .box { margin: 2rem; }

B. .box { margin: 0.5rem; }

C. .box { margin: 0.25rem; }

D. .box { margin: 1rem; }

Solution

1. Step 1: Understand map-get usage

   map-get($spacing-scale, 2) returns the value for key 2, which is 0.5rem.

2. Step 2: Apply mixin to .box

   The mixin sets margin to 0.5rem for .box.

3. Final Answer:

   .box { margin: 0.5rem; } -> Option B

4. Quick Check:

   map-get key 2 = 0.5rem [OK]

Hint: map-get returns value for given key in Sass map [OK]

Common Mistakes:

• Confusing keys and values in map-get
• Assuming mixin sets padding instead of margin
• Mixing up rem values for keys

4. Identify the error in this Sass code for generating spacing scale:

@function generate-spacing($steps) {
  $scale: ();
  @for $i from 1 through $steps {
    $scale: map-merge($scale, $i: $i * 0.25rem);
  }
  @return $scale;
}

$spacing-scale: generate-spacing(3);

medium

A. Cannot multiply number by unit directly in map-merge key-value

B. map-merge syntax is incorrect; keys must be strings

C. The function does not initialize $scale as a map

D. Using $i: $i * 0.25rem inside map-merge is invalid syntax

Solution

1. Step 1: Analyze map-merge usage

   map-merge expects a map and a map as arguments. The second argument must be a map with key-value pairs.

2. Step 2: Check key-value pair syntax

   $i: $i * 0.25rem is invalid inside map-merge because $i: is not a valid map literal key syntax. It should be ($i: $i * 0.25rem) wrapped in parentheses.

3. Final Answer:

   Using $i: $i * 0.25rem inside map-merge is invalid syntax -> Option D

4. Quick Check:

   map-merge needs proper map syntax [OK]

Hint: Wrap key-value pair in parentheses for map-merge [OK]

Common Mistakes:

• Forgetting parentheses around key-value pair in map-merge
• Trying to multiply unitless number by unit incorrectly
• Not initializing $scale as empty map ()

5. You want to create a spacing scale in Sass that doubles each step starting from 0.25rem for 5 steps (0.25rem, 0.5rem, 1rem, 2rem, 4rem). Which function correctly generates this scale as a map with keys 1 to 5?

hard

A. @function generate-scale($steps) {
$scale: ();
$value: 0.25rem;
@for $i from 1 through $steps {
$scale: map-merge($scale, ($i: $value));
$value: $value * 2;
}
@return $scale;
}

B. @function generate-scale($steps) {
$scale: ();
@for $i from 1 through $steps {
$scale: map-merge($scale, ($i: 0.25rem * $i));
}
@return $scale;
}

C. @function generate-scale($steps) {
$scale: ();
$value: 0.25rem;
@each $i in 1 2 3 4 5 {
$scale: map-merge($scale, ($i: $value));
$value: $value + 0.25rem;
}
@return $scale;
}

D. @function generate-scale($steps) {
$scale: ();
$value: 0.25rem;
@for $i from 1 through $steps {
$scale: map-merge($scale, ($i: $value));
$value: $value + $value;
}
@return $scale;
}

Solution

1. Step 1: Understand doubling logic

   The value starts at 0.25rem and doubles each step: multiply by 2 each loop.

2. Step 2: Check each function

   @function generate-scale($steps) { $scale: (); $value: 0.25rem; @for $i from 1 through $steps { $scale: map-merge($scale, ($i: $value)); $value: $value * 2; } @return $scale; } correctly initializes $value, merges map with ($i: $value), then doubles $value by multiplying by 2.

3. Step 3: Identify errors in others

   @function generate-scale($steps) { $scale: (); @for $i from 1 through $steps { $scale: map-merge($scale, ($i: 0.25rem * $i)); } @return $scale; } multiplies by $i (linear, not doubling). @function generate-scale($steps) { $scale: (); $value: 0.25rem; @each $i in 1 2 3 4 5 { $scale: map-merge($scale, ($i: $value)); $value: $value + 0.25rem; } @return $scale; } uses @each with addition (not doubling). @function generate-scale($steps) { $scale: (); $value: 0.25rem; @for $i from 1 through $steps { $scale: map-merge($scale, ($i: $value)); $value: $value + $value; } @return $scale; } adds $value to itself (works but less clear than multiply by 2).

4. Final Answer:

   Option A function correctly generates doubling scale -> Option A

5. Quick Check:

   Multiply by 2 each step = doubling scale [OK]

Hint: Multiply value by 2 each loop to double spacing [OK]

Common Mistakes:

• Using addition instead of multiplication for doubling
• Multiplying by loop index instead of doubling
• Using @each instead of @for for numeric loops