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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS? #Jan 8 How to Install Xcode Command Line Tools on MacOS?
You might also like these
Dynamically generate names in SCSS (animation example)SCSSThe SELECT DISTINCT Statement in SQLSQL/MySQLHow to add Lifecycle Methods to a Class in React?ReactWordPress: How to find all posts from a custom post type with multiple custom fields values?WordPressCheck whether a variable exists and not empty in PHPPHPHow to vertically and horizontally align text and image block (without flex or grid) in CSS?CSSContent Blocks in SCSS (Sass)SCSSSQL ALL OperatorSQL/MySQL@mixin and @include in SCSS (Sass)SCSSValues and Types Basics in JavaScriptJavaScriptHow to float an image around texts?CSSWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?Miscellaneous