dots Created with Sketch.
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 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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
What is Object Mutability in JavaScript?JavaScriptJavaScript Data Types and Data Structures Things to RememberJavaScriptWhat are Class Constants in PHP?PHPSome Useful Operators in The SQL WHERE ClauseSQL/MySQLNumber Properties in JavaScriptJavaScriptHow to add today’s date in HTML input date value using JavaScript?JavaScriptWordPress: How to display fields from ACF Flexible Contents?WordPressDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSAccessing and Setting features of JavaScript ObjectsJavaScriptWhat are components in Angular?AngularHow to convert a function component into a class in React?ReactList of social media icon logo color codes in HEXMiscellaneous