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.

Practice

1. What is the main purpose of the sass:math module in Sass?

easy

A. To provide useful math functions like rounding and max/min.

B. To add color manipulation functions.

C. To create animations in Sass.

D. To handle file imports automatically.

Solution

1. Step 1: Understand the module's role

   The sass:math module offers math functions such as rounding, max, min, and angle conversions.

2. Step 2: Compare options with module features

   Only To provide useful math functions like rounding and max/min. correctly describes these math functions; others mention unrelated features.

3. Final Answer:

   To provide useful math functions like rounding and max/min. -> Option A

4. Quick Check:

   sass:math = math functions [OK]

Hint: Remember sass:math is for math functions only [OK]

Common Mistakes:

• Confusing sass:math with color or animation modules
• Thinking sass:math handles file imports
• Assuming sass:math adds new CSS properties

2. Which of the following is the correct way to import the sass:math module in a Sass file?

easy

A. @import 'sass:math';

B. @include 'sass:math';

C. @require 'sass:math';

D. @use 'sass:math';

Solution

1. Step 1: Recall Sass module import syntax

   Sass uses @use to import modules like sass:math.

2. Step 2: Check each option's validity

   @import is deprecated for modules, @require and @include are invalid for imports.

3. Final Answer:

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

4. Quick Check:

   Module import = @use [OK]

Hint: Use @use for modules, not @import [OK]

Common Mistakes:

• Using @import instead of @use
• Trying @include or @require for modules
• Forgetting quotes around module name

3. What will be the output of this Sass code?

@use 'sass:math';

$val: math.round(4.7);
.result {
  width: $val * 1rem;
}

medium

A. .result { width: 5rem; }

B. .result { width: 4.7rem; }

C. .result { width: 4rem; }

D. Syntax error

Solution

1. Step 1: Understand math.round function

   math.round(4.7) rounds 4.7 to the nearest whole number, which is 5.

2. Step 2: Calculate the width value

   The width becomes 5 * 1rem = 5rem, so the CSS is .result { width: 5rem; }.

3. Final Answer:

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

4. Quick Check:

   round(4.7) = 5rem [OK]

Hint: math.round rounds to nearest integer [OK]

Common Mistakes:

• Assuming math.round truncates instead of rounds
• Confusing multiplication with string concatenation
• Expecting syntax error due to module usage

4. Identify the error in this Sass code using sass:math:

@use 'sass:math';

$angle: 90deg;
$rad: math.deg($angle);

medium

A. No error; code is correct.

B. Using math.deg instead of math.rad to convert degrees to radians.

C. Cannot assign units like deg to variables.

D. Missing semicolon after $angle declaration.

Solution

1. Step 1: Understand math.deg and math.rad functions

   math.deg() converts radians to degrees; math.rad() converts degrees to radians.

2. Step 2: Check code's intent and function used

   The variable $angle is in degrees, but math.deg() is used, which expects radians. The correct function is math.rad().

3. Final Answer:

   Using math.deg instead of math.rad to convert degrees to radians. -> Option B

4. Quick Check:

   Degrees to radians = math.rad [OK]

Hint: Use math.rad for degrees to radians, math.deg for reverse [OK]

Common Mistakes:

• Mixing up math.deg and math.rad functions
• Thinking units like deg can't be assigned
• Assuming missing semicolon causes error

5. You want to create a Sass variable $max-width that is the maximum of three values: 300px, 25rem, and 400px. Which code correctly uses sass:math to find this maximum, assuming 1rem = 16px?

hard

A. @use 'sass:math';
$max-width: math.max(300px, 25rem, 400px);

B. @use 'sass:math';
$max-width: math.max(300px, 400px, 25rem);

C. @use 'sass:math';
$max-width: math.max(300px, 25 * 16px, 400px);

D. @use 'sass:math';
$max-width: math.max(300px, math.div(25 * 16, 1), 400px);

Solution

1. Step 1: Understand unit conversion for comparison

   To compare 25rem with px, convert 25rem to px: 25 * 16px = 400px.

2. Step 2: Use math.max with consistent units

   @use 'sass:math'; $max-width: math.max(300px, 25 * 16px, 400px); converts 25rem to 400px by multiplying 25 * 16px, then finds max among 300px, 400px, 400px.

3. Final Answer:

   @use 'sass:math'; $max-width: math.max(300px, 25 * 16px, 400px); -> Option C

4. Quick Check:

   Convert units before max [OK]

Hint: Convert all units to same type before math.max [OK]

Common Mistakes:

• Passing mixed units without conversion
• Using math.div incorrectly for unit conversion
• Assuming math.max auto-converts units