sass:math module

Introduction

The sass:math module gives you ready-to-use math functions to do calculations in your stylesheets. It helps you keep your CSS neat and powerful.

When you want to calculate sizes like widths or heights based on other values.

When you need to round numbers or find the maximum or minimum of values.

When you want to convert angles or do trigonometry for animations or shapes.

When you want to keep your CSS flexible and avoid hardcoding numbers.

When you want to do math operations that CSS alone can't do easily.

Syntax

SASS

@use 'sass:math';

// Example usage:
$half: math.div(100px, 2);
$rounded: math.round(2.7);
$maxValue: math.max(10, 20, 15);

You must @use 'sass:math'; at the top of your Sass file to access math functions.

Functions are called with the prefix math. like math.div() or math.round().

Examples

This divides 200 pixels by 2 to get 100 pixels.

SASS

@use 'sass:math';

$half-width: math.div(200px, 2);

This rounds 3.6 to 4.

SASS

@use 'sass:math';

$rounded-number: math.round(3.6);

This finds the largest number, which is 10.

SASS

@use 'sass:math';

$max-value: math.max(5, 10, 7);

This converts 180 degrees to radians (about 3.14159).

SASS

@use 'sass:math';

$angle-in-radians: math.radians(180);

Sample Program

This Sass code uses the sass:math module to calculate sizes for a box. It doubles a base size, rounds a size, and divides for border radius. The box will have a blue background, white text, and centered content.

SASS

@use 'sass:math';

$base-size: 16px;
$double-size: math.mul($base-size, 2);
$rounded-size: math.round(12.7);

.box {
  width: $double-size;
  height: $rounded-size;
  background-color: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $base-size;
  border-radius: math.div($base-size, 2);
}

Important Notes

Always use @use 'sass:math'; once per file to access math functions.

Use math.div() instead of the slash / for division to avoid confusion with CSS slash syntax.

These functions help keep your styles dynamic and easy to update.

Summary

The sass:math module provides useful math functions for Sass.

Use it to do calculations like division, rounding, max/min, and angle conversions.

It helps make your CSS flexible and easier to maintain.