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 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
How to create rotating texts using JavaScript and CSS?CSSLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptHow to hide a DIV on clicks outside of it using jQuery?jQueryHow to create HTML elements with ID and class using JavaScript?HTMLHow to add a scroll back to top button using JavaScript and CSS?CSSKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousWhat is IPS(Intrusion Prevention System), How Does It Work and What are the Detection Types?MiscellaneousCrypto.getRandomValues() method in JavaScriptJavaScriptWordPress: How to get field values in Advanced Custom Fields?WordPressWhat are components in Angular?AngularRelative Length Units in CSSCSS