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.

Practice

1. What is the purpose of Sass built-in math functions?

easy

A. To perform calculations like rounding and comparing numbers in styles

B. To create animations in CSS

C. To add images to the webpage

D. To write HTML code inside Sass files

Solution

1. Step 1: Understand Sass math functions

   Sass math functions help with calculations such as rounding, min/max, and converting units.

2. Step 2: Identify the correct purpose

   Only To perform calculations like rounding and comparing numbers in styles describes calculation tasks related to styles, which is what Sass math functions do.

3. Final Answer:

   To perform calculations like rounding and comparing numbers in styles -> Option A

4. Quick Check:

   Math functions = calculations [OK]

Hint: Math functions handle numbers and calculations in Sass [OK]

Common Mistakes:

• Confusing math functions with animation or HTML tasks
• Thinking math functions add images
• Assuming math functions write HTML code

2. Which of the following is the correct way to import the Sass math module?

easy

A. @use 'sass:math';

B. @import 'math';

C. @include math();

D. @require 'sass/math';

Solution

1. Step 1: Recall Sass module import syntax

   Sass uses the @use rule to import built-in modules like math.

2. Step 2: Match correct syntax

   The correct syntax is @use 'sass:math';. Other options use outdated or incorrect syntax.

3. Final Answer:

   @use 'sass:math'; -> Option A

4. Quick Check:

   Import math module = @use 'sass:math'; [OK]

Hint: Use '@use' with 'sass:math' to import math functions [OK]

Common Mistakes:

• Using @import instead of @use
• Trying @include for importing modules
• Using incorrect path or syntax

3. What is the output of this Sass code?

@use 'sass:math';

$val: math.ceil(4.3);
.result {
  width: $val * 1rem;
}

medium

A. .result { width: 4rem; }

B. .result { width: 4.3rem; }

C. Syntax error

D. .result { width: 5rem; }

Solution

1. Step 1: Understand math.ceil function

   math.ceil(4.3) rounds 4.3 up to the nearest whole number, which is 5.

2. Step 2: Calculate the width property

   Width is set to 5 * 1rem = 5rem, so the output CSS is .result { width: 5rem; }.

3. Final Answer:

   .result { width: 5rem; } -> Option D

4. Quick Check:

   Ceil(4.3) = 5rem [OK]

Hint: Ceil rounds up to next whole number [OK]

Common Mistakes:

• Confusing ceil with floor (round down)
• Using original decimal value instead of rounded
• Expecting syntax error due to module import

4. Identify the error in this Sass code snippet:

@use 'sass:math';

$angle: 45deg;
$half: math.div($angle, 2px);
.box {
  transform: rotate($half);
}

medium

A. Incorrect import syntax for math module

B. Missing semicolon after $angle declaration

C. math.div cannot divide units like degrees

D. transform property does not accept variables

Solution

1. Step 1: Check math.div usage with units

   math.div divides numbers but cannot divide units like degrees directly.

2. Step 2: Understand unit division rules

   Dividing 45deg by 2px is invalid because degrees and px are incompatible units; math.div expects unitless numbers or compatible units.

3. Final Answer:

   math.div cannot divide units like degrees -> Option C

4. Quick Check:

   math.div with units like deg = error [OK]

Hint: math.div only divides numbers without incompatible units [OK]

Common Mistakes:

• Assuming math.div works with all units
• Ignoring unit compatibility in division
• Thinking transform can't use variables

5. You want to create a responsive font size that is the smaller of 3rem or 5rem using Sass math functions. Which code correctly sets $font-size to this value?

hard

A. @use 'sass:math';
$font-size: math.max(3rem, 5rem);

B. @use 'sass:math';
$font-size: math.min(3rem, 5rem);

C. $font-size: min(3rem, 5rem);

D. @use 'sass:math';
$font-size: math.round(3rem, 5rem);

Solution

1. Step 1: Understand the goal

   You want the smaller value between 3rem and 5rem for responsive font size.

2. Step 2: Identify correct Sass math function

   math.min() returns the smaller of two values. math.max() returns the larger, and math.round() rounds numbers, so they are incorrect here.

3. Final Answer:

   @use 'sass:math'; $font-size: math.min(3rem, 5rem); -> Option B

4. Quick Check:

   Use math.min for smallest value [OK]

Hint: Use math.min to pick smaller value between two units [OK]

Common Mistakes:

• Using math.max instead of math.min
• Omitting @use import for math module
• Trying to round instead of compare values