Spacing utility generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS code?

Given the following SASS code that generates margin utilities, what is the compiled CSS output for .m-2?

SASS

@mixin generate-spacing($property, $sizes) {
  @each $name, $size in $sizes {
    .#{$property}-#{$name} {
      #{$property}: #{$size};
    }
  }
}

$sizes: (
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem
);

@include generate-spacing('m', $sizes);

A .m-2 { margin: 2rem; }

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

C .m-2 { padding: 0.5rem; }

D .m-2 { margin: 0.25rem; }

💡 Hint

Look at how the mixin uses the $property and $sizes map to create classes.

The mixin loops through the $sizes map and creates classes with the property name and size key. For 'm' and key '2', it sets margin: 0.5rem.

🧠 Conceptual

intermediate

Which SASS feature allows dynamic generation of spacing utilities?

You want to create multiple spacing utility classes like .p-1, .p-2, etc., without writing each class manually. Which SASS feature helps you do this efficiently?

A Using @import to include external files

B Using @if conditional statements

C Using @extend to inherit styles

D Using @each loop with a map of sizes

💡 Hint

Think about repeating code for multiple values.

The @each loop lets you iterate over a map or list to generate multiple classes dynamically.

❓ selector

advanced

Which selector is generated by this SASS snippet?

Consider this SASS code snippet: $sizes: (small: 0.5rem, medium: 1rem); @mixin spacing($property) { @each $name, $value in $sizes { .#{$property}-#{$name} { #{$property}: $value; } } } @include spacing('p'); Which CSS selector will be generated?

A .p-small

B .padding-small

C .p_small

D .p-small-value

💡 Hint

Look at how the class name is constructed using interpolation.

The class name is built by combining the property string and the key from the map with a hyphen.

❓ layout

advanced

What visual effect does this spacing utility have?

Given the CSS class generated by this SASS code: .p-3 { padding: 1rem; } What will you see on an element with class p-3?

A The element's font size will increase by 1rem.

B The element will have 1rem margin outside its border, pushing other elements away.

C The element will have 1rem padding on all sides, creating space inside the element's border.

D The element will have a 1rem border thickness.

💡 Hint

Padding adds space inside the element's border.

Padding creates space inside the element, between its content and border, here 1rem on all sides.

❓ accessibility

expert

How to ensure spacing utilities do not harm accessibility?

When generating spacing utilities with SASS, what should you consider to maintain good accessibility?

A Ensure spacing does not cause content overlap or reduce readable area, and test with keyboard navigation and screen readers.

B Use only fixed pixel values for spacing to keep layout consistent.

C Avoid using spacing utilities on interactive elements to prevent confusion.

D Only apply spacing utilities on elements with aria-label attributes.

💡 Hint

Think about how spacing affects layout and user experience for all users.

Proper spacing improves readability and usability. Overlapping or cramped content can confuse users, especially those using assistive technologies.

Practice

1. What is the main purpose of generating spacing utilities using Sass?

easy

A. To replace all CSS selectors with Sass variables

B. To create complex animations with spacing

C. To quickly add consistent margin and padding across a project

D. To automatically generate color palettes

Solution

1. Step 1: Understand spacing utilities

   Spacing utilities are small reusable classes that add margin or padding quickly and consistently.

2. Step 2: Identify the purpose of Sass in spacing

   Sass helps generate these utilities efficiently using mixins and maps, ensuring uniform spacing.

3. Final Answer:

   To quickly add consistent margin and padding across a project -> Option C

4. Quick Check:

   Spacing utilities = consistent margin/padding [OK]

Hint: Spacing utilities = fast, consistent margin/padding [OK]

Common Mistakes:

• Confusing spacing utilities with animations
• Thinking Sass replaces CSS selectors entirely
• Mixing spacing utilities with color generation

2. Which Sass syntax correctly defines a map of spacing sizes for utility generation?

easy

A. $spacing-sizes = [small: 0.5rem, medium: 1rem, large: 2rem];

B. $spacing-sizes: (small => 0.5rem, medium => 1rem, large => 2rem);

C. $spacing-sizes: {small: 0.5rem, medium: 1rem, large: 2rem};

D. $spacing-sizes: (small: 0.5rem, medium: 1rem, large: 2rem);

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

   The valid syntax is $spacing-sizes: (small: 0.5rem, medium: 1rem, large: 2rem); using parentheses and colons. Invalid syntax includes square brackets with =, curly braces, and => instead of :.

3. Final Answer:

   $spacing-sizes: (small: 0.5rem, medium: 1rem, large: 2rem); -> Option D

4. Quick Check:

   Sass map syntax = parentheses + colons [OK]

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

Common Mistakes:

• Using square brackets instead of parentheses
• Using => instead of : for key-value pairs
• Using curly braces instead of parentheses

3. Given this Sass code snippet, which of the following CSS classes will be generated?

@mixin generate-spacing($property, $sizes) {
  @each $name, $size in $sizes {
    .#{$property}-#{$name} {
      #{$property}: $size;
    }
  }
}

$spacing-sizes: (small: 0.5rem, medium: 1rem);
@include generate-spacing(margin, $spacing-sizes);

medium

A. .margin-small { margin: 0.5rem; }

B. .m-small { padding: 0.5rem; }

C. .m-small { margin: small; }

D. .m-small { margin: 0.5rem; }

Solution

1. Step 1: Understand the mixin logic

   The mixin loops over $sizes and creates classes named by combining $property and $name, setting $property to $size.

2. Step 2: Trace execution

   $property = margin, $name = small, $size = 0.5rem generates .margin-small { margin: 0.5rem; }.

3. Final Answer:

   .margin-small { margin: 0.5rem; } -> Option A

4. Quick Check:

   Class name = property-name, so .margin-small [OK]

Hint: Class name combines property and size name exactly [OK]

Common Mistakes:

• Assuming short property names like 'm' are generated
• Confusing margin with padding
• Using size name as value instead of actual size

4. Identify the error in this Sass mixin for generating padding utilities:

@mixin generate-padding($sizes) {
  @each $name, $size in $sizes {
    .p-#{$name} {
      padding: $size
    }
  }
}

$spacing-sizes: (small: 0.5rem, medium: 1rem);
@include generate-padding($spacing-sizes);

medium

A. Missing semicolon after 'padding: $size' declaration

B. Incorrect map syntax for $spacing-sizes

C. Wrong mixin name used in @include statement

D. Invalid interpolation syntax in class name

Solution

1. Step 1: Check property declarations inside mixin

   In Sass, each CSS property must end with a semicolon. The line 'padding: $size' is missing a semicolon.

2. Step 2: Verify other parts

   The map syntax and mixin name are correct. Interpolation syntax .p-#{$name} is valid.

3. Final Answer:

   Missing semicolon after 'padding: $size' declaration -> Option A

4. Quick Check:

   CSS properties need semicolons [OK]

Hint: Always end CSS declarations with semicolon in Sass [OK]

Common Mistakes:

• Forgetting semicolon after property value
• Confusing map syntax with list syntax
• Misnaming mixins or includes

5. You want to generate both margin and padding utilities using a single Sass mixin that accepts a property list and a size map. Which code snippet correctly achieves this?

hard

A. @mixin generate-spacing($properties, $sizes) {
@each $property, $size in $sizes {
.#{$property} {
#{$property}: $size;
}
}
}

$spacing-sizes: (margin: 1rem, padding: 2rem);
@include generate-spacing($spacing-sizes);

B. @mixin generate-spacing($properties, $sizes) {
@each $property in $properties {
@each $name, $size in $sizes {
.#{$property}-#{$name} {
#{$property}: $size;
}
}
}
}

$spacing-sizes: (small: 0.5rem, medium: 1rem);
@include generate-spacing((margin, padding), $spacing-sizes);

C. @mixin generate-spacing($properties, $sizes) {
@each $name, $size in $sizes {
.#{$name} {
margin: $size;
padding: $size;
}
}
}

$spacing-sizes: (small: 0.5rem, medium: 1rem);
@include generate-spacing($spacing-sizes);

D. @mixin generate-spacing($properties, $sizes) {
@each $property in $properties {
.#{$property} {
#{$property}: $sizes;
}
}
}

$spacing-sizes: (small: 0.5rem, medium: 1rem);
@include generate-spacing((margin, padding), $spacing-sizes);

Solution

1. Step 1: Understand the requirement

   The mixin must loop over multiple properties (margin, padding) and multiple sizes to generate classes like .margin-small, .padding-small.

2. Step 2: Analyze each option

   @mixin generate-spacing($properties, $sizes) { @each $property in $properties { @each $name, $size in $sizes { .#{$property}-#{$name} { #{$property}: $size; } } } } $spacing-sizes: (small: 0.5rem, medium: 1rem); @include generate-spacing((margin, padding), $spacing-sizes); correctly nests two loops: one for properties, one for sizes, generating correct class names and CSS. @mixin generate-spacing($properties, $sizes) { @each $property, $size in $sizes { .#{$property} { #{$property}: $size; } } } $spacing-sizes: (margin: 1rem, padding: 2rem); @include generate-spacing($spacing-sizes); incorrectly loops over sizes as properties. @mixin generate-spacing($properties, $sizes) { @each $name, $size in $sizes { .#{$name} { margin: $size; padding: $size; } } } $spacing-sizes: (small: 0.5rem, medium: 1rem); @include generate-spacing($spacing-sizes); generates classes only by size names and applies both margin and padding together, not separate utilities. @mixin generate-spacing($properties, $sizes) { @each $property in $properties { .#{$property} { #{$property}: $sizes; } } } $spacing-sizes: (small: 0.5rem, medium: 1rem); @include generate-spacing((margin, padding), $spacing-sizes); tries to assign a map directly to a property, which is invalid.

3. Final Answer:

   Code with nested @each loops over $properties list and $sizes map -> Option B

4. Quick Check:

   Nested loops for properties and sizes = correct [OK]

Hint: Use nested loops: properties outer, sizes inner [OK]

Common Mistakes:

• Looping incorrectly over map keys and values
• Assigning map directly to CSS property
• Generating combined margin and padding in one class