Built-in math functions in SASS

Introduction

Built-in math functions help you do common math tasks easily in your styles. They save time and make your code cleaner.

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

You need to find the maximum or minimum of several numbers for layout.

You want to round numbers to avoid blurry edges in designs.

You want to do simple math like adding, subtracting, or multiplying colors or lengths.

You want to convert angles or do trigonometry for animations or shapes.

Syntax

SASS

function-name(argument1, argument2, ...)

Use parentheses () to pass values to the function.

Functions return a value you can use in your styles.

Examples

Returns the largest value, here 20px.

SASS

max(10px, 20px, 15px)

Rounds 4.7 to the nearest whole number, 5.

SASS

round(4.7)

Converts 0.5 to 50%.

SASS

percentage(0.5)

Returns the absolute value, 10.

SASS

abs(-10)

Sample Program

This code uses Sass math functions to set the box width to the largest value, round the height, convert a fraction to percentage for margin, get absolute padding, and limit hue value for background color.

SASS

@use "sass:math";

.box {
  width: math.max(100px, 150px, 120px);
  height: math.round(75.6);
  margin-left: math.percentage(0.25);
  padding: math.abs(-20px);
  background-color: hsl(math.min(360, 400), 70%, 50%);
}

Important Notes

Remember to import the math module with @use "sass:math"; before using math functions.

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

Summary

Built-in math functions make calculations in Sass simple and clean.

Use them to compare, round, convert, and calculate values in your styles.

Always import the math module to access these functions.