Built-in math functions in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code using the ceil() function?

Consider the following Sass code snippet:

$value: 4.3;
$result: ceil($value);
body {
  font-size: #{$result}rem;
}

What will be the computed font-size in the rendered CSS?

SASS

$value: 4.3;
$result: ceil($value);
body {
  font-size: #{$result}rem;
}

A font-size: 5rem;

B font-size: 3rem;

C font-size: 4rem;

D font-size: 4.3rem;

💡 Hint

The ceil() function rounds a number up to the nearest whole number.

The ceil() function rounds 4.3 up to 5, so the font-size becomes 5rem.

🧠 Conceptual

intermediate

Which Sass built-in math function returns the absolute value?

You want to get the positive value of a number in Sass, regardless if it is negative or positive. Which function should you use?

A floor()

B round()

C abs()

D max()

💡 Hint

Think about the function that removes the sign from a number.

The abs() function returns the absolute (positive) value of a number.

❓ rendering

advanced

What CSS does this Sass code produce using min() and max()?

Given this Sass code:

$width1: 100px;
$width2: 150px;
$width3: 120px;

.container {
  width: min(max($width1, $width3), $width2);
}

What is the final width value in the compiled CSS?

SASS

$width1: 100px;
$width2: 150px;
$width3: 120px;

.container {
  width: min(max($width1, $width3), $width2);
}

A width: 150px;

B width: 100px;

C width: 170px;

D width: 120px;

💡 Hint

First find the max between $width1 and $width3, then find the min between that result and $width2.

max(100px, 120px) is 120px; min(120px, 150px) is 120px, so width is 120px.

❓ selector

advanced

Which Sass function rounds a number to the nearest integer?

You want to round a decimal number to the nearest whole number in Sass. Which function will do this?

A round()

B floor()

C ceil()

D abs()

💡 Hint

This function rounds up or down depending on the decimal part.

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

❓ accessibility

expert

How can Sass math functions help improve accessibility in responsive typography?

You want to create a responsive font size that never goes below 1rem and never above 2rem, scaling smoothly between viewport widths. Which Sass math functions help enforce these limits?

A Use abs() to ensure positive sizes and ceil() to round up sizes.

B Use max() to set the minimum size and min() to set the maximum size.

C Use floor() to set minimum size and round() to set maximum size.

D Use min() to set the minimum size and max() to set the maximum size.

💡 Hint

Think about which function picks the bigger or smaller value.

Using max() ensures the font size does not go below the minimum, and min() ensures it does not exceed the maximum, helping maintain readable text sizes for accessibility.