sass:math module - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to calculate the square root of 16 using sass:math.

SASS

@use "sass:math";

$result: math.[1](16);

Drag options to blanks, or click blank then click option'

Asqrt

Bpow

Cabs

Dround

Attempts:

3 left

💡 Hint

Common Mistakes

Using math.pow instead of math.sqrt for square root.

Trying to use math.abs which returns absolute value, not square root.

The math.sqrt() function returns the square root of a number. Here, it calculates the square root of 16, which is 4.

2fill in blank

medium

Complete the code to calculate 2 raised to the power of 3 using sass:math.

SASS

@use "sass:math";

$result: math.[1](2, 3);

Drag options to blanks, or click blank then click option'

Asqrt

Blog

Cpow

Dmax

Attempts:

3 left

💡 Hint

Common Mistakes

Using math.sqrt instead of math.pow for exponentiation.

Using math.log which calculates logarithm, not power.

The math.pow(base, exponent) function raises the base to the power of the exponent. Here, 2³ equals 8.

3fill in blank

hard

Fix the error in the code to get the absolute value of -10 using sass:math.

SASS

@use "sass:math";

$value: math.[1](-10);

Drag options to blanks, or click blank then click option'

Asqrt

Bround

Cpow

Dabs

Attempts:

3 left

💡 Hint

Common Mistakes

Using math.sqrt which calculates square root, not absolute value.

Using math.pow which raises to a power, not absolute value.

The math.abs() function returns the absolute value of a number, turning negative numbers positive.

4fill in blank

hard

Fill both blanks to create a map of numbers and their rounded values using sass:math.

SASS

@use "sass:math";
$numbers: (1.2, 2.5, 3.7);
$rounded: ([1]: math.[2](1.2), 2.5: math.round(2.5));

Drag options to blanks, or click blank then click option'

A1.2

Bround

C1.3

Dceil

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1.3 as key instead of 1.2.

Using math.ceil instead of math.round for rounding.

The first key in the map is the number 1.2, and the value is its rounded value using math.round(1.2). The second pair uses 2.5 as key and rounds it similarly.

5fill in blank

hard

Fill all three blanks to create a map of numbers and their square roots using sass:math.

SASS

@use "sass:math";
$values: ([1]: math.[2](9), [3]: math.sqrt(16));

Drag options to blanks, or click blank then click option'

Anine

Bsqrt

Cfour

Dround

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers as keys instead of words.

Using math.round instead of math.sqrt for square root.

The map keys are descriptive names 'nine' and 'four'. The values are the square roots of 9 and 16 using math.sqrt().

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