dots Created with Sketch.
Yogesh Chauhan's Blog

How does while loop work in SCSS?

in SCSS on July 20, 2021

Similar posts:

for @each loop in SCSS

for loop in SCSS

SassScript has a rule @while that is used for writing a while loop with a code block.

Syntax


@while {
  ...
}

SassScript @while loop works same as JavaScript while loop.

  • If the expression returns true then run the code block inside the curly brackets.
  • After the execution of the code block inside the loop, check again if the expression is true.
  • If not, do not then stop execution of the loop.
  • Keep executing the code block inside the brackets till the expression is true.

Example


$min: 0;

@while $min < 5 {
    .p-#{$min*5} {
        padding: (5*$min) + px;
    }

    $min: $min + 1;
}

The code above will compile into the following CSS code:


.p-0 {
	 padding: 0px;
}
 .p-5 {
	 padding: 5px;
}
 .p-10 {
	 padding: 10px;
}
 .p-15 {
	 padding: 15px;
}
 .p-20 {
	 padding: 20px;
}

amazon

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
Higher Order Functions in JavaScript with ExamplesJavaScriptThe Drupal flowDrupalWhat does Containment mean in React?ReactHow to add a Bar Chart in Angular App?AngularHow to catch .keypress() on body using jQuery?jQueryAggregate Functions Examples in Postgres for BeginnersPostgresWP_Query Class in WordPressWordPressHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftWhat is a “promise” in JavaScript?JavaScriptIntroduction to components and templates Part 1: Component MetadataAngularHow to apply style only to first child and/or only to children other than the first child?CSSCheck if mixin is being called in a style rule or not in SCSSSCSS