# @while control directive

The clinical definition of the @while directive is; the @while directive takes an expression and while the expression is true, the code block within the @while declaration will be implemented.

Let's look at a textbook example:

$class-name: span !default;$start-width: 25%;
$i: 4; @while$i > 0 {
.#{$class-name}-#{$i} {
width: $start-width *$i;
}
$i:$i - 1;
}


The above code will compile to:

.span-4 {
width: 100%;
}

.span-3 {
width: 75%;
}

.span-2 {
width: 50%;
}

.span-1 {
width: 25%;
}


The key with this directive is that you need to set a manual iterator for this to work, for example $i:$i - 1;. This iterator will take the original value of $i and then subtract 1 with each loop. The directive itself is stating, @while$i > 0 keep executing the loop. Pretty simple, right?