sass:math module - Mini Project: Build & Apply

Using sass:math Module for Styling

📖 Scenario: You are creating a simple webpage style where you want to use math functions from the sass:math module to calculate sizes dynamically.

🎯 Goal: Build a Sass stylesheet that uses the sass:math module to calculate a font size and a container width based on given base values.

📋 What You'll Learn

Import the sass:math module

Create a base font size variable

Create a scale factor variable

Calculate a larger font size using math.mul()

Calculate a container width using math.div()

💡 Why This Matters

🌍 Real World

Using the sass:math module helps you write cleaner, more maintainable styles by calculating sizes dynamically instead of hardcoding values.

💼 Career

Many front-end developer roles require knowledge of Sass and its modules to create scalable and flexible CSS for websites and apps.

1

Import sass:math module and set base variables

Write an @use statement to import the sass:math module as math. Then create a variable called $base-font-size and set it to 1.2rem. Also create a variable called $scale-factor and set it to 1.5.

SASS

@use "sass:math" as math;

// Your code here

Hint

Use @use "sass:math" as math; to import the module. Then create variables with $ and assign the exact values.

2

Calculate larger font size using math.mul()

Create a variable called $large-font-size and set it to the result of multiplying $base-font-size by $scale-factor using math.mul().

SASS

@use "sass:math" as math;

$base-font-size: 1.2rem;
$scale-factor: 1.5;

// Your code here

Hint

Use math.mul() with the two variables inside the parentheses.

3

Calculate container width using math.div()

Create a variable called $container-width and set it to the result of dividing 1200px by $scale-factor using math.div().

SASS

@use "sass:math" as math;

$base-font-size: 1.2rem;
$scale-factor: 1.5;

$large-font-size: math.mul($base-font-size, $scale-factor);

// Your code here

Hint

Use math.div() with 1200px and $scale-factor as arguments.

4

Use variables in CSS rules

Write CSS rules for body and .container. Set font-size of body to $large-font-size. Set width of .container to $container-width. Use the variables exactly as written.

SASS

@use "sass:math" as math;

$base-font-size: 1.2rem;
$scale-factor: 1.5;

$large-font-size: math.mul($base-font-size, $scale-factor);

$container-width: math.div(1200px, $scale-factor);

// Your code here

Hint

Write CSS selectors body and .container with their properties using the variables.

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