Yogesh Chauhan's Blog

for @each loop in SCSS

in SCSS on July 19, 2021

For each loop is similar to a for loop in SassScript.

To write a for each loop, you need to use @each rule.

Using @each rule you can go through each element from a list and evaluate a particular style.


@each $var in $list {

Each time the for each loop go through the element and executes a code, it creates a new selector as per the rule.


$widths: 10px, 50px;

@each $width in $widths {
  .img-#{$width} {
    width: $size;

The code above compiled to this CSS:

.img-10px {
  width: 10px;

.img-50px {
  width: 50px;

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
WordPress: How to find all posts from a custom post type with specific custom field?WordPressHow to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSSasync function in JavaScriptJavaScriptWhat are Google Web Stories and How to create them in WordPress?WordPressHow to create a function in SCSS (Sass)?SCSSHow to list all PHP variables to debug the script?PHPHow to Install PHP composer in Mac OS Catalina?PHPWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPWhat is iFrame in HTML? Why do we need it?HTMLIs PHP still good for back-end programming?PHPHow to embed YouTube or other video links in WordPress?WordPress