How does while loop work in SCSS?

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

Share this post