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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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
Add animated hamburgers menu using Hamburgers collection on GitHubCSSHow to animate list items using CSS and JavaScript?CSSHow to get previous days or next days in PHP?PHPHow to make WordPress main stylesheet (style.css)?WordPress4 ways to create Date Objects in JavaScriptJavaScript5 Ways to Loop Through JavaScript ArraysJavaScript