Sass Math Functions — Calculations and Number Operations

In this tutorial, you will learn about Sass Math Functions. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass math functions from the sass:math module provide number operations including division, rounding, exponentiation, square root, trigonometry, and unit conversion.

What You'll Learn

You will learn how to use math functions for calculations, handle units correctly, perform rounding operations, and solve common layout math problems.

Why It Matters

Math functions enable programmatic layout calculations. DodaTech uses math functions for fluid typography, grid calculations, and spacing scale generation.

Real-World Use

Durga Antivirus Pro uses math functions for dynamic chart sizing, proportional icon scaling, and responsive column calculations.

flowchart LR
    A[Color Functions] --> B[Math Functions]
    B --> C[Division]
    B --> D[Rounding]
    B --> E[Comparison]
    B --> F[Units]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Division with math.div

@use "sass:math";

.col-3 {
  width: math.div(100%, 3);       // 33.33333%
}

.half {
  height: math.div(200px, 2);     // 100px
}

.ratio-box {
  padding-top: math.div(9, 16) * 100%; // 56.25% (16:9 aspect ratio)
}

Expected output: Mathematical division with correct unit handling.

The math.div function is required because the / operator is deprecated for division in modern Sass.

Rounding Functions

@use "sass:math";

.ceil {
  width: math.ceil(10.1px);      // 11px
}

.floor {
  height: math.floor(10.9px);    // 10px
}

.round {
  padding: math.round(10.5px);   // 11px
}

.round-down {
  padding: math.round(10.4px);   // 10px
}

Expected output: Numbers rounded up, down, and to nearest integer.

Clamping and Comparison

@use "sass:math";

.max-width {
  max-width: math.max(300px, 500px, 400px); // 500px
}

.min-width {
  min-width: math.min(300px, 500px, 400px); // 300px
}

// Clamp within range
.responsive-size {
  font-size: clamp(1rem, math.clamp(2vw, 1rem, 3rem), 3rem);
}

Expected output: Comparison functions returning the min, max, or clamped value.

Exponentiation and Roots

@use "sass:math";

.squared {
  width: math.pow(2, 3) * 1px;   // 8px
}

.square-root {
  height: math.sqrt(16) * 1rem;  // 4rem
}

.cube-root {
  top: math.pow(27, 1/3) * 1px;  // 3px
}

Expected output: Powers and roots for mathematical scaling.

Trigonometric Functions

@use "sass:math";

.rotated {
  transform: rotate(math.cos(0deg) * 1deg);   // cos(0) = 0
}

.sin-wave {
  transform: rotate(math.sin(90deg) * 1deg);  // sin(90) = 1
}

.tangent {
  transform: rotate(math.tan(45deg) * 1deg);  // tan(45) = 1
}

Expected output: Trigonometric function outputs for rotation and animation calculations.

Logarithmic Functions

@use "sass:math";

.log-base {
  content: math.log(100, 10) + ""; // 2 (log base 10 of 100)
}

.natural-log {
  content: math.log(2.71828) + ""; // ~1 (natural log of e)
}

.log10-direct {
  content: math.log10(1000) + "";  // 3
}

Expected output: Logarithmic calculations.

Percentage and Unit Functions

@use "sass:math";

.percentage {
  width: math.percentage(0.5);        // 50%
}

.is-unitless {
  content: math.is-unitless(16) + "";    // true
}

.is-unitless-false {
  content: math.is-unitless(16px) + "";  // false
}

.compatible {
  content: math.compatible(1px, 1em) + ""; // false (incompatible)
}

// Unit conversion
.absolute {
  content: math.abs(-50px) + ""; // 50px
}

Expected output: Unit checking and absolute value operations.

Practical: Fluid Typography

@use "sass:math";

@function fluid-clamp($min, $max, $min-vw: 320px, $max-vw: 1200px) {
  $slope: math.div($max - $min, $max-vw - $min-vw);
  $intercept: $min - $slope * $min-vw;
  @return clamp(#{$min}, calc(#{$slope * 100}vw + #{$intercept}), #{$max});
}

h1 {
  font-size: fluid-clamp(1.5rem, 3rem);
}

p {
  font-size: fluid-clamp(1rem, 1.25rem);
}

Expected output: Fluid typography using clamp() with calculated slope and intercept.

Common Mistakes

1. Using / for Division

The / operator now creates CSS division. Use math.div($a, $b) instead.

2. Mixing Incompatible Units

math.div(10px, 2em) fails because px and em are incompatible. Use compatible units.

3. Forgetting @use "sass:math"

Math functions require the module import. Without it, math.div, math.ceil, etc. are not available.

4. Unitless Results in Typed Contexts

math.div(16px, 2) returns 8px. But math.div(16, 2) returns unitless 8. Know your units.

5. Integer Division Gotchas

math.div(10px, 3) gives 3.33333px, not 3px. Use math.floor(math.div(...)) for integer results.

Practice Questions

1. How do you divide 100% by 3 correctly? math.div(100%, 3) returns 33.33333%.

2. What function rounds a number up to the nearest integer? math.ceil(10.1px) returns 11px.

3. How do you calculate 2 to the power of 8? math.pow(2, 8) returns 256.

4. What is the difference between math.floor and math.round? floor always rounds down. round rounds to the nearest integer (0.5 rounds up).

5. How do you check if two units are compatible? math.compatible(1px, 1em) returns false. math.compatible(1px, 1cm) returns true.

Challenge

Create a modular scale calculator using math.pow. Given a base size (1rem) and ratio (1.25), generate 10 steps above and 5 steps below the base. Use math functions for all calculations.

FAQ

Mini Project

Build a responsive grid system using Sass math. Given a number of columns (12) and a gutter width (1.5rem), calculate: column width, offset width, and container max-width. Generate all column classes using loops and math.

What's Next

Learn Sass List Functions for data manipulation. Then explore Sass Map Functions for key-value data handling.