Yogesh Chauhan's Blog

How to create a for loop in SCSS (Sass)?

in SCSS on June 9, 2021

The for loop is created using a @for rule.

Syntaxes

Syntax 1


@for <variable> from <expression> to <expression> { 
  ... 
}


Syntax 2


@for <variable> from <expression> through <expression> { 
  ... 
}


Both of the syntaxes above counts from one end (first expression) to the other end (second expression) and evaluates the block inside the loop for each single increment or decrement.

We use variable right after starting the for rule and that variable is assigned the number from the loop every time.

If you use @for rule with “to” then the final number is not included but if you use @for rule with “through” then the final number is included.

@for loop example with through


@for loop example with to


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
How to Hide HTML elements automatically after few seconds using JavaScript?HTMLCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPWhat’s a page re-rendering in React?ReactAlways add associated labels to your Form elementsUI/UXIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLWhat is the best way to add JavaScript Code into HTML?HTMLThe ALPHA function in Envision BasicEnvision BasicHow to define constants in PHP?PHPHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to set up the local environment and workspace for Angular development?AngularHow to list all PHP variables to debug the script?PHPHow to Write Complex Search Queries in SQL?SQL/MySQL