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;
}


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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

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
Useful (and probably ignored) HTML tags: Part 2HTMLDROP DATABASE (remove a database) from PostgresPostgresHow to concatenate variable with string in Swift?SwiftDefault Values in SCSS (Sass)SCSSIs there a CSS parent selector?CSSHow to check if checkbox is checked or not using JavaScript?JavaScriptWordPress: How to get ACF field values from another post?WordPressHow to change perception and behavior of a person for acceptance of new systems?Miscellaneous4 ways to create Date Objects in JavaScriptJavaScriptKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousHow to Block IPs and User Agents using code in Drupal or WordPress?DrupalQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQL