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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to disable right click and drag and drop of images using jQuery?jQueryHow to float an image around texts?CSSHow to import a CSS file using PHP code and not HTML code?PHPFull and Partial ROLLUP in Postgresql with ExamplesPostgresAdd animation to your skills bar using CSSCSSHow to Access a Global Variable From Inside a Function in PHP?PHP