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.