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 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 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

#Dec 4 What is Etrieve Flow? #Dec 2 The unique operator($) in Envision Basic #Nov 25 Steps to Install Microsoft SQL Server on a MacOS #Nov 11 What is DevOps? #Nov 10 The * arithmetic operator in Envision Basic #Nov 10 What are Big Data Clusters in SQL Server?
You might also like these
RIGHT JOIN in PostgresPostgresSelector Lists and Combinators in SCSS (Sass)SCSSHow to read Standard Input in Swift?SwiftReverse a String in JavaScriptJavaScriptComposing and Extracting Components in ReactReactDISTINCT ON: The confusing, unique and useful feature in PostgresPostgresDefault Values in SCSS (Sass)SCSSWhat is an API?MiscellaneousArguments in @mixin rules in SCSS (Sass)SCSSWhat are Controlled Components in React?ReactSQL GROUP BY StatementSQL/MySQLHow to add Read More Read Less Button using JavaScript?JavaScript