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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
The order Property in Flex Items in CSSCSSNumber Properties in JavaScriptJavaScriptHow to create a vertically rotating texts using CSS?CSSHow to Commit and Rollback Changes in SQL?SQL/MySQLA complete guide to add responsive YouTube videos using HTML and CSSCSSIntroduction to components and templates Part 4: Pipes and DirectivesAngular