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.

Syntax


@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.

Example


$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

#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 convert a function component into a class in React?ReactColumn and Table Alias in PostgresPostgresHow to add a Bar Chart in Angular App?AngularCROSS JOIN in PostgresPostgresHow to concatenate variable with string in Swift?SwiftThe SQL UNION OperatorSQL/MySQLControl Scrolling with CSS Scroll SnapCSSHow to create a smooth scrolling effect with CSS?CSS2 Ways We Can Write Multiple Line Commands in PHPPHPHow Do You Make a Private VPN?MiscellaneousHow to check if the page is the home page in WordPress?WordPressHTML canvas methodsHTML