Yogesh Chauhan's Blog

# Variables and Distance Functions in SCSS (Sass)

in SCSS on July 29, 2021

SassScript has some built-in module that we can make use of for mathematical purposes.

## Variables

Variables are in-built modules that holds a value and print or use that specific value when called.

### math.\$e

The variable module math.\$e used to print the value of mathematical constant (e).

This is how you can use it:

@debug math.\$e;
// 2.7182818285

Of course, that’s just for printing the value but you’d want to use it in a mathematical equation.

### math.\$pi

Another variable module is math.\$pi which is equal to the value of Pi.

This is how you can use it:

@debug math.\$pi;
// 3.1415926536

## Distance Functions

### math.abs()

math.abs function returns an absolute value. So, it’ll return a positive number whether you pass a positive or a negative number to it.

#### Syntax

math.abs(\$number)
abs(\$number)
//=> number

#### Usage

@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px

### math.hypot

This is one of the complex function SassScript has.

The syntax is like this:

math.hypot(\$number...)

//\$number

The function returns returns the distance from the origin to the specified coordinates, it is known as Euclidean norm.

It is similar to Python math.hypot() Method.

All the specified numbers must all have compatible units, or let all be unitless.

In the case of different numbers’ units, the output will take the unit of the first number.

### Usage

@debug math.hypot(3, 4);
// 5