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.