sass:math module - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using sass:math?

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

SASS

@use 'sass:math';
$result: math.round(4.7);

A 5

B 4

C Error: Undefined function math.round

D 4.7

💡 Hint

The math.round() function rounds a number to the nearest whole number.

The math.round(4.7) rounds 4.7 to the nearest integer, which is 5.

🧠 Conceptual

intermediate

Which sass:math function returns the smallest integer greater than or equal to a number?

You want to get the smallest integer that is not less than a given decimal number in Sass. Which function from the sass:math module should you use?

SASS

@use 'sass:math';

A math.abs()

B math.round()

C math.floor()

D math.ceil()

💡 Hint

Think about which function rounds numbers up.

math.ceil() returns the smallest integer greater than or equal to the input number.

❓ selector

advanced

What is the output of this Sass code using sass:math with nested functions?

Given the Sass code below, what is the final value of $value?

SASS

@use 'sass:math';
$value: math.abs(math.min(-3, 2, -5));

A -5

B 3

C 5

D -3

💡 Hint

First find the minimum number, then get its absolute value.

math.min(-3, 2, -5) returns -5, and math.abs(-5) returns 5.

❓ layout

advanced

How does sass:math affect responsive layout calculations?

You want to calculate a width that is half of a container but rounded up to the nearest whole number using sass:math. Which code snippet correctly achieves this?

SASS

@use 'sass:math';

A width: math.ceil(100% / 2);

B width: math.ceil(100 / 2);

C width: math.ceil(50%);

D width: math.ceil(50 / 100);

💡 Hint

Percentages need to be handled carefully in Sass math functions.

math.ceil(100% / 2) correctly divides 100% by 2 and rounds up the result.

❓ accessibility

expert

Which sass:math function helps ensure consistent color contrast calculations for accessibility?

You want to calculate the luminance difference between two colors to check accessibility contrast. Which sass:math function is best suited to help with this calculation?

SASS

@use 'sass:math';

A math.round()

B math.abs()

C math.max()

D math.min()

💡 Hint

Contrast difference should always be a positive number.

math.abs() returns the absolute value, ensuring contrast difference is positive for accessibility checks.