Yogesh Chauhan's Blog

random function in SCSS (Sass)

in SCSS on July 30, 2021


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.


math.random($limit: null)


random($limit: null) 


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 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
What is IPS(Intrusion Prevention System), How Does It Work and What are the Detection Types?MiscellaneousSQL Left JoinSQL/MySQLHow to change the Login Logo in WordPress?WordPressHow to create a simple drop down menu using JavaScript and CSS?CSSConfiguring Modules with @forward rule in SCSS (Sass)SCSSA short basic guide on states in ReactReact4 different ways to create JavaScript ObjectsJavaScriptHow to add multiple Columns in CSS like Bootstrap?CSSOptional arguments, Default parameters and REST parameters in JavaScriptJavaScriptWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQueryFilling a button background from left to right using CSSCSSCan Firewall and IDPS Stop DDoS Attack?Miscellaneous