The numeric functions are used to manipulate numeric values.
As with the string functions, Sass provides a basic set of functions for manipulating numeric values, and they work the way you'd expect them to. Note that you can provide CSS value descriptors such as "px" or "rem" to all the functions except percentage(). Sass will ignore the units, and they won't included in the result.
The following table that contains the list of all all Sass Numeric functions with a brief description and examples.
Function | Description | Examples | Result |
---|---|---|---|
percentage($number) | Converts a unitless number to a percentage; i.e., multiplies it by 100 | percentage(1.5) | 150 |
percentage(1em) | syntax error | ||
round($number) | Rounds a number to the nearest whole number | round(7.25) | 7 |
round(7.5) | 8 | ||
ceil($number) | Rounds a number up to the nearest whole number | ceil(7.25) | 8 |
floor($number) | Rounds a number down to the nearest whole number | floor(7.75) | 7 |
abs($number) | Returns the absolute value of a number | abs(7) | 7 |
abs(-7) | 7 | ||
min($numbers) | Returns the smallest value in a list of numbers | min(3, 5, -2, 7, 0) | -2 |
max($numbers) | Returns the largest value in a list of numbers | max(3, 5, -2, 7, 0) | 7 |
random() | Returns a random value larger than 0 and smaller than 1 | random() | 0.87267 |
random($limit) | Returns a random whole number between 1 and the number specified by $limit, inclusive | random(4) | 3 |