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 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
random function in SCSS (Sass)SCSSHow to Draw a Text Image using JavaScript?JavaScriptHow destructuring works in React?ReactCanvas Drawing in HTML5HTMLCommon Table Expressions (CTE) in PostgreSQLPostgresCheck whether a variable exists and not empty in PHPPHPHow to create a simple text and image slider using CSS and JavaScript?CSSINNER JOIN in PostgresPostgresJavaScript: how to detect a browser using the user agent?JavaScriptHow to use HTML picture Tag?HTMLHow to set default timezone using PHP?PHPHow to create and store JSON objects in localStorage using JavaScript?JavaScript