SASS @while Rule - Usage of This SCSS Directive

1. What is SASS @while Rule?

As we have seen in the SASS @for control rule tutorial, we iterate the SCSS code block until the terminating limit is reached. However, the SASS control family provides us with the @while flow control rule which will only evaluate the SCSS code block if the conditions return true. Therefore, the code block continues to execute until the SCSS expression returns false.

1.1. SASS @while Directive Syntax

The following code box contains the syntax representation for the @while directive in SCSS programming.

@while <expression> { ... }

• The syntax of the SCSS @while directive comprises three components.
• We initiate the syntax notation by adding the @while rule itself.
• Next, we write the SCSS expression to check the true or false status.
• Eventually, we include the code block in curly braces for resolving upon true condition.

2. How to Use the SCSS @while Rule?

The usage of SCSS @while directive can be understood from the following instance.

$count: 0;
@while $count <= 5 {
	h#{$count+1} {
		$font-calc: ((36-$count*3));
		$margin-calc: (30 - $count*5);
		$font: 0;
		$margin: 0;
		@if $font-calc%2 == 0 {
			$font : $font-calc +px;
		}
		@else{
			$font: ($font-calc - 1)+px;
		}

		@if $margin-calc%2 == 0 {
			$margin : $margin-calc +px 0;
		}
		@else{
			$margin: ($margin-calc + 1)+px 0;
		}
		font-size: $font;
		color: #333;
		margin: $margin;
		padding: 10px;
	}
	$count: $count + 1;
}

h1 {
	font-size: 36px;
	color: #333;
	margin: 30px 0;
	padding: 10px;
}
h2 {
	font-size: 32px;
	color: #333;
	margin: 26px 0;
	padding: 10px;
}
h3 {
	font-size: 30px;
	color: #333;
	margin: 20px 0;
	padding: 10px;
}
h4 {
	font-size: 26px;
	color: #333;
	margin: 16px 0;
	padding: 10px;
}
h5 {
	font-size: 24px;
	color: #333;
	margin: 10px 0;
	padding: 10px;
}
h6 {
	font-size: 20px;
	color: #333;
	margin: 6px 0;
	padding: 10px;
}

2.1. Explanation

• In the above instance, we utilized the SCSS @while rule and @if and @else directives to generate style rules for headings from h1 to h6.
• The @while directive takes the input expression as $count and iterates from 0 to 5 including 5 also.
• The iteration of the SCSS @while rule terminates untill the $count + 1 inside th curly braces, exceeds the input expression i.e $count <= 5.
• Moreover, when an iteration of the code block is done, the $count+1 at the end adds 1 to the $count variable.
• Thus, each repetition increases this $count variable by 1.
• The CSS code tab contains the resulted styles for different headings.

3. SASS @while Truthiness and Falsiness

The SCSS language has criteria to declare the true or false status of an expression.

• Firstly, we can utilize the true or false status of an SCSS expression anywhere, however, other values can also be used.
• Further, SCSS declares the fail condition and considers it falsey, whenever the SCSS @while directive encounters the false or null value.
• Contrary to it, all other values are considered truthy, hence, SASS considers them true and thus set the conditions to succeed.
• For example, if you want to check whether a string contains a space or not, you write the below expression.
• string.index($string, " "). The string.index() function returns null if there is a string, and a number if there is some string.