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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
JavaScript String fromCharCode() MethodJavaScriptKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?MiscellaneousKanban vs Scrum: The two frameworks of agile principlesMiscellaneous4 different Ways to Get JavaScript OutputJavaScriptHow to add a scroll back to top button using JavaScript and CSS?CSSHow to add MySQL alternate port and sockets/pipes in WordPress?WordPressHow can one check to see if a remote file exists using PHP?PHP3 JavaScript methods to use when you want to go back and forth in historyJavaScriptclip and clip-path properties in CSSCSSWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousHow to refresh a page using PHP at regularly occurring intervals?PHPHow to vertically align a html radio button to it’s label?CSS