Numeric Functions in Sass | Explained

Sass pre-processes CSS and is compatible with all its versions, thereby enhancing the capability of the basic language. It is renowned for saving time and effort by preventing its users from using redundant CSS values. It facilitates its users by supporting the usage of mixins, variables, nesting, inheritance, functions, etc. In this post we are going to look into various numeric functions in Sass.

Numeric Functions in Sass

Numeric functions in Sass are used to handle numeric values just the way string functions in Sass that are used to manipulate string characters.

There are multiple numeric functions in Sass that are discussed below.

1. abs(number) function

This function is used to fetch the absolute value of a number.

Example

Output

2. ceil(number) function

For the purpose of rounding up a number to its closest integer, the ceil(number) function is used.

Example

Output

3. floor(number) function

This function is used for the purpose of rounding down a number to its closest integer.

Example

Output

4. max(number) function

For fetching the largest number in a list of numbers, this method is used.

Example

Output

5. min(number) function

For fetching the smallest number in a list of numbers, this method is used.

Example

Output

6. percentage(number) function

This function is used for converting a number to a percentage.

Example

Output

7. random() function

In order to fetch a random number between 0 and 1, the random() function is used.

Example

Output

8. random(number) function

This function gives a random number between 0 and the stated number.

Example

Output

9. round(number) function

This function rounds a number to the integer closest to that particular number.

Example

Output

Another example.

Example

Output

Conclusion

Numeric functions in Sass are used to handle numeric values just the way string functions in Sass that are used to manipulate string characters. There are multiple string functions in Sass such as abs(number), round(number), random() etc. Each of these serves a different purpose which we have explained in this article along with relevant examples.