Arithmetic operations in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code?

Consider the following Sass code snippet. What will be the computed value of $result?

SASS

$width: 10rem;
$height: 5rem;
$result: $width / $height;

A 2rem

B 2rem / 5rem

C 2 (unitless)

D 2

💡 Hint

Division of two values with the same unit results in a unitless number.

When dividing two values with the same unit in Sass, the units cancel out, leaving a unitless number. Here, 10rem / 5rem equals 2 without any units.

🧠 Conceptual

intermediate

Which Sass operation will cause an error?

Given the following variables, which operation will cause a Sass error?

SASS

$padding: 20px;
$margin: 1.5em;

A $padding / $margin

B $margin - 0.5em

C $padding + 10px

D $padding * 2

💡 Hint

Sass does not allow division between values with different units without explicit handling.

Dividing 20px by 1.5em causes an error because Sass cannot divide values with different units directly.

❓ rendering

advanced

What is the computed CSS output of this Sass snippet?

Given this Sass code, what will be the final CSS value for width?

SASS

$base: 8rem;
$scale: 1.25;
.container {
  width: $base * $scale + 2rem;
}

A width: 10rem;

B width: 12rem + 2rem;

C width: 12rem 2rem;

D width: 12rem;

💡 Hint

Remember to perform multiplication before addition and units must be compatible.

Multiplying 8rem by 1.25 gives 10rem, then adding 2rem results in 12rem. Sass computes this fully before output.

❓ selector

advanced

Which Sass selector uses arithmetic to calculate margin correctly?

Which option correctly sets a margin that is half of the padding variable?

SASS

$padding: 40px;

A margin: $padding / 2;

B margin: $padding / 2px;

C margin: $padding * 0.5px;

D margin: $padding - 20px;

💡 Hint

Dividing a length by a number keeps the unit; multiplying by a length unit requires care.

Dividing $padding (40px) by 2 results in 20px, which is half the padding. Multiplying by 0.5px would produce px squared, which is invalid.

❓ accessibility

expert

How can Sass arithmetic help improve accessible responsive font sizes?

Which Sass code snippet uses arithmetic to create a font size that scales between 1rem and 2rem based on viewport width, improving accessibility?

A font-size: 1rem + 100vw / 680 * 1rem;

B font-size: calc(1rem + (100vw - 320px) / 680 * 1rem);

C font-size: 1rem * 100vw / 680 + 1rem;

D font-size: calc(1rem * 100vw / 680 + 1rem);

💡 Hint

Use calc() with proper parentheses and units for responsive scaling.

Option B correctly uses calc() with arithmetic to scale font size smoothly between 1rem and 2rem as viewport width changes, enhancing accessibility.