Fluid spacing with calculations 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, what is the computed padding value in the compiled CSS for the .container class?

SASS

$base-padding: 1rem;
$scale-factor: 1.5;

.container {
  padding: calc(#{$base-padding} * #{$scale-factor});
}

A

.container {
  padding: 1.5rem;
}

B

.container {
  padding: calc(1rem * 1.5);
}

C

.container {
  padding: 1rem 1.5rem;
}

D

.container {
  padding: calc(1.5 * 1rem);
}

💡 Hint

Remember that SASS variables inside calc() are inserted as raw values, not pre-calculated.

SASS inserts variables inside calc() as raw values, so the output keeps the calc() expression with substituted values. It does not compute the multiplication beforehand.

🧠 Conceptual

intermediate

Why use calc() with fluid spacing in SASS?

Which of the following best explains why developers use calc() combined with SASS variables for fluid spacing?

A To prevent any changes in spacing regardless of screen size.

B To force the browser to ignore media queries and use fixed spacing.

C To convert all units to pixels before rendering.

D To allow combining fixed and relative units dynamically for responsive design.

💡 Hint

Think about mixing units like rem and vw for responsiveness.

Using calc() lets you combine fixed units like rem with relative units like vw, enabling spacing that adjusts fluidly with screen size.

❓ selector

advanced

Which selector applies fluid spacing only on screens wider than 600px?

Given this SASS snippet, which compiled CSS selector and media query combination correctly applies fluid padding only on screens wider than 600px?

SASS

@media (min-width: 600px) {
  .box {
    padding: calc(1rem + 2vw);
  }
}

A

@media (min-width: 600px) {
  .box {
    padding: calc(1rem + 2vw);
  }
}

B

@media (max-width: 600px) {
  .box {
    padding: calc(1rem + 2vw);
  }
}

C

.box {
  padding: calc(1rem + 2vw);
}

D

@media (min-width: 600px) {
  .box {
    padding: 1rem;
  }
}

💡 Hint

Check the media query condition for minimum width.

The media query with min-width: 600px applies styles only on screens wider than 600px, so fluid padding inside it works as intended.

❓ layout

advanced

What visual effect does this fluid spacing produce?

Consider this CSS snippet generated from SASS: .box { margin: calc(1rem + 2vw); } What will the margin behavior be as the browser window width changes?

A Margin decreases as viewport width increases.

B Margin stays fixed at 1rem regardless of viewport size.

C Margin increases as the viewport width increases, starting from 1rem base.

D Margin randomly changes with no relation to viewport size.

💡 Hint

Remember vw means viewport width percentage.

2vw means 2% of viewport width, so margin grows as the window gets wider, starting from a base of 1rem.

❓ accessibility

expert

How to ensure fluid spacing maintains accessibility?

When using fluid spacing with calculations in SASS/CSS, which practice best supports accessibility for users with different needs?

A Use relative units like rem and allow user zoom without fixed pixel values.

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

C Disable user zoom to maintain layout integrity.

D Use absolute units like cm or in for precise spacing.

💡 Hint

Think about users who zoom or change font size.

Using relative units like rem respects user settings and zoom, improving accessibility, while fixed pixels or disabling zoom harm it.