Tutorialsteacher

Follow Us

Sass - Numeric Functions

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.

FunctionDescriptionExamplesResult
percentage($number)Converts a unitless number to a percentage; i.e., multiplies it by 100percentage(1.5)150
percentage(1em)syntax error
round($number)Rounds a number to the nearest whole numberround(7.25)7
round(7.5)8
ceil($number)Rounds a number up to the nearest whole numberceil(7.25)8
floor($number)Rounds a number down to the nearest whole numberfloor(7.75)7
abs($number)Returns the absolute value of a numberabs(7)7
abs(-7)7
min($numbers)Returns the smallest value in a list of numbersmin(3, 5, -2, 7, 0)-2
max($numbers)Returns the largest value in a list of numbersmax(3, 5, -2, 7, 0)7
random()Returns a random value larger than 0 and smaller than 1random()0.87267
random($limit)Returns a random whole number between 1 and the number specified by $limit, inclusiverandom(4)3