Spacing scale generation in SASS - Performance & Optimization

Performance: Spacing scale generation

MEDIUM IMPACT

This affects CSS file size and browser rendering speed by controlling how spacing values are generated and reused.

Creating consistent spacing values for margins and paddings

SASS

$base-spacing: 4px;
@function spacing($step) {
  @return $base-spacing * $step;
}
.element {
  margin: spacing(1) spacing(2) spacing(3) spacing(4);
}

Using a function to generate spacing values reduces repetition and keeps CSS concise.

📈 Performance GainSaves ~1kb in CSS size and reduces style recalculations by reusing computed values.

Creating consistent spacing values for margins and paddings

SASS

$spacing-1: 4px;
$spacing-2: 8px;
$spacing-3: 12px;
$spacing-4: 16px;
$spacing-5: 20px;

.element {
  margin-top: 4px;
  margin-right: 8px;
  margin-bottom: 12px;
  margin-left: 16px;
}

Manually defining each spacing value and applying them directly leads to repetitive CSS and larger file size.

📉 Performance CostAdds unnecessary CSS rules increasing bundle size by ~1-2kb and triggers multiple style recalculations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual spacing values for each element	Low	Multiple reflows if spacing changes	Medium due to many unique styles	[X] Bad
Function-generated spacing scale	Low	Single reflow on spacing change	Low due to fewer unique styles	[OK] Good

Rendering Pipeline

Spacing scale generation affects the Style Calculation and Layout stages by controlling how many unique spacing values the browser must process.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to many unique spacing values increasing CSS complexity

Core Web Vital Affected

LCP

This affects CSS file size and browser rendering speed by controlling how spacing values are generated and reused.

Optimization Tips

1Use functions or variables to generate spacing values instead of hardcoding.

2Keep the number of unique spacing values low to reduce CSS complexity.

3Reuse spacing values consistently to minimize style recalculations.

Performance Quiz - 3 Questions

Why is generating spacing values with a function better for performance than hardcoding each value?

A It makes the browser ignore spacing styles

B It increases the number of unique CSS rules

C It reduces CSS file size and style recalculations

D It forces the browser to repaint more often

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the Style Calculation and Layout timings.

What to look for: Look for long Style Calculation times or multiple reflows caused by many unique spacing values.

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