Yogesh Chauhan's Blog

random function in SCSS (Sass)

in SCSS on July 30, 2021

math.random()

math.random() returns a random decimal number between 0 and 1.

You can pass an argument as a limit and the function will return a random decimal number between 0 and the limit passed.

Syntax


math.random($limit: null)

//or

random($limit: null) 


Example

Click on the SCSS and Result tabs 👇 interchangeably and you’ll see the div in different shape each time.

We can create a random posts listing like this:


When to use it?

If you’re going to compile the SCSS into CSS and ship it then the random() function won’t work since by the time you compile into CSS, the values are fixed.

So, if you need random value each time user refreshes the browser page, I would advise not to use SCSS random() function but go with PHP or other server side or just client side random function.

If you just need random values one time and then use those for a project, go for SCSS random() function.


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
EXISTS and NOT EXISTS in PostgresPostgresArbitrary Arguments in SCSS functionsSCSSCONCAT and CONCAT_WS Functions in PostgresPostgresThe Difference Between isNaN() Method And isNaN() Function In JavaScriptJavaScriptSELF JOIN in PostgresPostgresHow to change HTML content on click using JavaScript?JavaScriptRecursive WITH Queries in Postgres (Common Table Expressions)PostgresAlternate Style Sheets in CSSCSSCreate a menu with a curtain falling animation using CSS and JavaScriptCSSHow does AdSense calculate page loading time?JavaScriptWhat are Identifiers in JavaScript?JavaScriptAngular: Templates, directives, data binding, Services and dependency injectionAngular