Spacing scale generation in SASS - Mini Project: Build & Apply

Spacing Scale Generation with Sass

📖 Scenario: You are creating a consistent spacing scale for a website using Sass. This scale will help keep margins and paddings uniform across the site.

🎯 Goal: Build a Sass map called $spacing-scale with specific spacing values, then create a variable for the base spacing unit, generate a new map with doubled spacing values, and finally output CSS custom properties for these spacing values.

📋 What You'll Learn

Create a Sass map named $spacing-scale with keys small, medium, and large and values 0.5rem, 1rem, and 2rem respectively.

Create a variable named $base-spacing and set it to 1rem.

Generate a new Sass map named $double-spacing by multiplying each value in $spacing-scale by 2.

Output CSS custom properties for each key in $double-spacing inside the :root selector.

💡 Why This Matters

🌍 Real World

Spacing scales help keep website design consistent and easy to update by centralizing spacing values.

💼 Career

Front-end developers use Sass maps and loops to manage design tokens like spacing, colors, and fonts efficiently.

1

Create the initial spacing scale map

Create a Sass map called $spacing-scale with these exact entries: small: 0.5rem, medium: 1rem, and large: 2rem.

SASS

# Create the $spacing-scale map with small, medium, and large keys
# Your code here

Hint

Use parentheses ( ) to create a Sass map and separate key-value pairs with commas.

2

Add a base spacing variable

Create a variable called $base-spacing and set it to 1rem.

SASS

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

# Create $base-spacing variable and set it to 1rem
# Your code here

Hint

Variables in Sass start with $. Assign the value with a colon and end with a semicolon.

3

Generate doubled spacing map

Create a new Sass map called $double-spacing by multiplying each value in $spacing-scale by 2 using a @each loop and map-merge().

SASS

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

$base-spacing: 1rem;

$double-spacing: ();

# Use @each to loop over $spacing-scale and multiply values by 2
# Add each doubled value to $double-spacing using map-merge
# Your code here

Hint

Use @each $key, $value in $spacing-scale to loop. Use map-merge() to add to a map.

4

Output CSS custom properties for doubled spacing

Write CSS inside the :root selector that outputs custom properties for each key in $double-spacing using a @each loop. The property names should be --spacing- followed by the key, and the values should be the doubled spacing values.

SASS

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

$base-spacing: 1rem;

$double-spacing: ();

@each $key, $value in $spacing-scale {
  $double-spacing: map-merge($double-spacing, ($key: $value * 2));
}

:root {
  /* Output CSS custom properties here using @each */
  # Your code here
}

Hint

Use :root selector and inside it use @each $key, $value in $double-spacing. Output custom properties with --spacing-#{$key}: #{$value};.

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