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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
Attributes and Properties in JavaScript and HTMLHTMLHow to create a vertically rotating texts using CSS?CSSHow to set default timezone using PHP?PHPLIKE and ILIKE Operators in PostgresPostgresSteps to Secure a VPNMiscellaneousRelative Length Units in CSSCSSAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPTwo ways we can use colon(:) in Envision BasicEnvision BasicShort-Circuit Evaluation in JavaScriptJavaScriptWordPress: How to access first and random row values from a repeater field in ACF?WordPressMIN, MAX, COUNT, AVG and SUM in SQLSQL/MySQLHow to show confirmation alerts with OK and cancel buttons using Swift 5?Swift