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.

Practice

1. What does the Sass expression 10px + 5px produce?

easy

A. Syntax error

B. 105px

C. 15px

D. 5px

Solution

1. Step 1: Understand addition of units in Sass

   Sass adds numbers with the same units by adding their numeric values and keeping the unit.

2. Step 2: Calculate the sum of 10px and 5px

   10 + 5 equals 15, so the result is 15px.

3. Final Answer:

   15px -> Option C

4. Quick Check:

   10px + 5px = 15px [OK]

Hint: Add numbers only if units match exactly [OK]

Common Mistakes:

• Concatenating numbers as strings (getting 105px)
• Ignoring units and returning just number
• Thinking addition causes syntax error

2. Which of the following is the correct Sass syntax to multiply 8px by 3?

easy

A. 8px * 3

B. 8px x 3

C. multiply(8px, 3)

D. 8px ** 3

Solution

1. Step 1: Identify the multiplication operator in Sass

   Sass uses the asterisk (*) symbol for multiplication.

2. Step 2: Check each option for correct syntax

   8px * 3 uses * correctly; others use invalid syntax.

3. Final Answer:

   8px * 3 -> Option A

4. Quick Check:

   Multiplication uses * operator [OK]

Hint: Use * for multiplication, not x or other symbols [OK]

Common Mistakes:

• Using 'x' instead of '*' for multiplication
• Trying function calls like multiply() which Sass doesn't have
• Using ** which is not Sass syntax

3. What is the output of this Sass code?

$width: 20px;
$padding: 5px;
$total: $width + $padding * 2;

What is the value of $total?

medium

A. Syntax error

B. 50px

C. 60px

D. 30px

Solution

1. Step 1: Apply operator precedence in Sass arithmetic

   Multiplication (*) has higher precedence than addition (+), so calculate $padding * 2 first: 5px * 2 = 10px.

2. Step 2: Add $width and the multiplication result

   20px + 10px = 30px.

3. Final Answer:

   30px -> Option D

4. Quick Check:

   20px + (5px * 2) = 30px [OK]

Hint: Multiply before adding, like in normal math [OK]

Common Mistakes:

• Adding before multiplying (getting 50px)
• Confusing units causing syntax errors
• Ignoring operator precedence

4. Identify the error in this Sass code:

$height: 50px;
$width: 20;
$total: $height + $width;

medium

A. Error: Cannot add values with different units

B. No error, $total is 70px

C. Error: Missing semicolon after $width

D. Error: Variables must start with uppercase

Solution

1. Step 1: Check units of variables

   $height has unit px, but $width is a number without unit.

2. Step 2: Understand Sass unit rules for addition

   Sass cannot add numbers with different or missing units, so this causes an error.

3. Final Answer:

   Error: Cannot add values with different units -> Option A

4. Quick Check:

   Adding px and unitless number causes error [OK]

Hint: Always match units when adding or subtracting [OK]

Common Mistakes:

• Assuming unitless numbers auto-convert
• Thinking missing semicolon causes error here
• Believing variable names must be uppercase

5. You want to calculate the width of a container minus twice the padding using Sass variables:

$container-width: 1000px;
$padding: 20px;
$usable-width: $container-width - 2 * $padding;

What is the correct value of $usable-width?

hard

A. 960

B. 960px

C. 1040px

D. Syntax error

Solution

1. Step 1: Calculate twice the padding

   2 * $padding = 2 * 20px = 40px.

2. Step 2: Subtract twice the padding from container width

   1000px - 40px = 960px.

3. Final Answer:

   960px -> Option B

4. Quick Check:

   1000px - (2 * 20px) = 960px [OK]

Hint: Multiply padding first, then subtract from container width [OK]

Common Mistakes:

• Forgetting units in result (writing 960 without px)
• Adding instead of subtracting
• Syntax errors from missing spaces or operators