SASS | Numeric Functions
Just like the SASS string functions, SASS gives a simple set of functions for changing the numeric values, and these values work the way you’d like them to. Note that one can give CSS value descriptors such as “px” or “rem” to every function except “percentage()”. In that case, SASS will ignore the units, and they won’t shown in the results.
The following table lists all numeric functions in Sass:
Function | Description | Example |
---|---|---|
percentage(number) | This method converts a unitless number to the percentage. It means, multiplies it by 100. |
percentage(2.5) Output: 250 percentage(4em) Output: syntax error |
round(number) | This method rounds the number to the nearest whole number. | round(2.25) Output: 2 round(2.5) Output: 3 |
ceil(number) | This method rounds the number up to the nearest whole number. |
ceil(2.25) Output: 3 |
floor(number) | This method rounds the number down to the nearest whole number. | floor(2.25) Output: 2 |
abs(number) | This method returns the absolute value of the number. |
abs(2) Output: 2 abs(-2) Output: 2 |
min(numbers) | This method returns the smallest value in the list of numbers. | min(4, 5, -7, 8, 2) Output: -7 |
max(numbers) | This method returns the largest value in the list of numbers. | max(4, 5, -7, 8, 2) Output: 8 |
random() | This method returns a random number in the range of [0, 1]. |
random() Output: 0.4965 |
random(limit) | This method returns a random whole number in the range of [1, limit]. |
random(4) Output: 2.4652 |
Contact Us