sass:math

Compatibility:
Dart Sass
since 1.23.0
LibSass
Ruby Sass

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.

math.abs($number)
abs($number) //=> number 

Returns the absolute value of $number. If $number is negative, this returns -$number, and if $number is positive, it returns $number as-is.

SCSS Syntax

@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px

Sass Syntax

@debug math.abs(10px) // 10px
@debug math.abs(-10px) // 10px
math.ceil($number)
ceil($number) //=> number 

Rounds $number up to the next highest whole number.

SCSS Syntax

@debug math.ceil(4); // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5

Sass Syntax

@debug math.ceil(4)  // 4
@debug math.ceil(4.2)  // 5
@debug math.ceil(4.9)  // 5
math.compatible($number1, $number2)
comparable($number1, $number2) //=> boolean 

Returns whether $number1 and $number2 have compatible units.

If this returns true, $number1 and $number2 can safely be added, subtracted, and compared. Otherwise, doing so will produce errors.

SCSS Syntax

@debug math.compatible(2px, 1px); // true
@debug math.compatible(100px, 3em); // false
@debug math.compatible(10cm, 3mm); // true

Sass Syntax

@debug math.compatible(2px, 1px)  // true
@debug math.compatible(100px, 3em)  // false
@debug math.compatible(10cm, 3mm)  // true
math.floor($number)
floor($number) //=> number 

Rounds $number down to the next lowest whole number.

SCSS Syntax

@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4

Sass Syntax

@debug math.floor(4)  // 4
@debug math.floor(4.2)  // 4
@debug math.floor(4.9)  // 4
math.max($number...)
max($number...) //=> number 

Returns the highest of one or more numbers. A list of numbers can be passed using ....

SCSS Syntax

@debug math.max(1px, 4px); // 4px

$widths: 50px, 30px, 100px;
@debug math.max($widths...); // 100px

Sass Syntax

@debug math.max(1px, 4px)  // 4px

$widths: 50px, 30px, 100px 
@debug math.max($widths...)  // 100px
math.min($number...)
min($number...) //=> number 

Returns the lowest of one or more numbers. A list of numbers can be passed using ....

SCSS Syntax

@debug math.min(1px, 4px); // 1px

$widths: 50px, 30px, 100px;
@debug math.min($widths...); // 30px

Sass Syntax

@debug math.min(1px, 4px)  // 1px

$widths: 50px, 30px, 100px 
@debug math.min($widths...)  // 30px
math.percentage($number)
percentage($number) //=> number 

Converts a unitless $number (usually a decimal between 0 and 1) to a percentage.

SCSS Syntax

@debug math.percentage(0.2); // 20%
@debug math.percentage(100px / 50px); // 200%

Sass Syntax

@debug math.percentage(0.2)  // 20%
@debug math.percentage(100px / 50px)  // 200%
math.random($limit: null)
random($limit: null) //=> number 

If $limit is null, returns a random decimal number between 0 and 1.

SCSS Syntax

@debug math.random(); // 0.2821251858
@debug math.random(); // 0.6221325814

Sass Syntax

@debug math.random()  // 0.2821251858
@debug math.random()  // 0.6221325814

If $limit is a number greater than or equal to 1, returns a random whole number between 1 and $limit.

SCSS Syntax

@debug math.random(10); // 4
@debug math.random(10000); // 5373

Sass Syntax

@debug math.random(10)  // 4
@debug math.random(10000)  // 5373
math.round($number)
round($number) //=> number 

Rounds $number to the nearest whole number.

SCSS Syntax

@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5

Sass Syntax

@debug math.round(4)  // 4
@debug math.round(4.2)  // 4
@debug math.round(4.9)  // 5
math.unit($number)
unit($number) //=> quoted string 

Returns a string representation of $number's units.

SCSS Syntax

@debug math.unit(100); // ""
@debug math.unit(100px); // "px"
@debug math.unit(5px * 10px); // "px*px"
@debug math.unit(5px / 1s); // "px/s"

Sass Syntax

@debug math.unit(100)  // ""
@debug math.unit(100px)  // "px"
@debug math.unit(5px * 10px)  // "px*px"
@debug math.unit(5px / 1s)  // "px/s"
math.is-unitless($number)
unitless($number) //=> boolean 

Returns whether $number has no units.

SCSS Syntax

@debug math.is-unitless(100); // true
@debug math.is-unitless(100px); // false

Sass Syntax

@debug math.is-unitless(100)  // true
@debug math.is-unitless(100px)  // false