Sass Tutorial

Sass HOME Sass Intro Sass Installation Sass Variables Sass Nesting Sass @import Sass @mixin Sass @extend

Sass Functions

Sass String Sass Numeric Sass List Sass Map Sass Selector Sass Introspection Sass Color

Sass Exercises

Sass Quiz

Sass Numeric Functions

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