SASS @if Rule - How To Use the SCSS @else if Directive

What is SASS @if Rule?

The SASS flow control directive family contains the SCSS @if rule to return either true or false conditions. It means that the @if rule will only resolve the SCSS code block when the status is true, otherwise, the false state will not permit this directive to resolve the code chunk.

Syntax of SCSS @if Rule

Below is the straightforward syntax of the SASS @if directive.

@if <expression> { ... }

• The @if SCSS rule has three components of the syntax.
• The very first constituent is the @if directive keyword itself.
• Next, we write some SASS expressions upon which the true or false conditions are based.
• Lastly, we include the SCSS code block which we want to resolve based on the return value of the expression.

SCSS @if Directive Usage

Let us comprehend the usage of the SASS @if directive by the following instance. The below example utilizes a SASS @mixin directive that takes two arguments and produces the border-radius property based on the @if outcome.

@mixin wrapper($size, $radius: false){
	width: $size;
	height: $size;
	padding: $size/20;
	@if $radius{
		border-radius: $size / 2;
	}
}

.wrapper-square{
	@include wrapper(200px, $radius: false);
}
.wrapper-round{
	@include wrapper(200px, $radius: true);
}

.wrapper-square{
	width: 200px;
	height: 200px;
	padding: 10px;
}
.wrapper-round{
	width: 200px;
	height: 200px;
	padding: 10px;
	border-radius: 1000px;
}

What is SASS @else Rule?

The SASS control rules family has a dependent @else directive that relies on the SCSS @if rule.

• We only include the @else directive to resolve the alternate SCSS code block when the @if rule does not meet the required conditions and returns false.
• Individually, this SASS @else directive has no meaning and hence does not work.
• Thus, we consistently employ this rule with the @if directive.
• Further, this @else rule is optional.

Syntax of SCSS @else Rule

The @else SCSS directive has the below simplified syntax.

@else { ... }

• The @else SASS rule has two parts of the syntax.
• Firtsly, we add the @else rule itselft.
• Next, we include the code block to resolve.

Usage of SCSS @else Directive

Let us understand the utilization of this SASS @else directive by the following instance.

@mixin panel($size){
	width: $size;
	@if $size < 700px{
		border-radius: 5px;
		padding: 10px;
	}
	@else{
		border-radius: 10px;
		padding: 20px;
	}
}

.panel-md{
	@include panel(500px);
}
.panel-lg{
	@include panel(900px);
}

.panel-md {
	width: 500px;
	border-radius: 5px;
	padding: 10px;
}
.panel-lg {
	width: 900px;
	border-radius: 10px;
	padding: 20px;
}

What is SASS @else if Rule?

There is also a derivative of SCSS @else rule as @else if directive.

• This @else if rule is utilized to check some further conditions to evaluate another SCSS code block.
• Also, when the SASS expression of the @else if directive returns true, this style block will resolve.
• But this @else if will only check the conditions and resolve the code block when the previous @if rule returns false for its expressions.
• Moreover, we can chain multiple @else if control rules after the first @if SASS directive.
• Also, when any of the expressions of the chain returns true, the code block after that expression will be resolved.
• However, if the last member of the chain only contains the @else rule, then its style block will only resolve when all other blocks produce the false outcome.

Syntax of SCSS @else if Directive

The @else if SCSS directive has following syntax notation.

@if <expression>{ ... }
@else if <expression>{ ... }
@else if <expression>{ ... }
.
.

• The SASS @else if the directive has four components of the syntax.
• Firstly, we add the @else and then if keywords.
• Next, we include the expression to check the conditions.
• Lastly, we enclose the code block within the curly braces.

Usage of SASS @else if Directive

@mixin border($color, $direction: null) {
	@if $direction == top {
		border-top: 10px solid $color;
	} @else if $direction == right {
		border-right: 10px solid $color;
	} @else if $direction == bottom {
		border-botom: 10px solid $color;
	} @else if $direction == left {
		border-left: 10px solid $color;
	} @else {
		border: 10px solid $color;
	}
}

.inner-wrapper {
	@include border(#2a73cc, right);
}
.main {
	@include border(#999999, xxxxxxxxxxxx)
}
.panel {
	@include border(#153966)
}

.inner-wrapper {
	border-right: 10px solid #2a73cc;
}
.main {
	border: 10px solid #999999;
}
.panel {
	border: 10px solid #153966;
}

SASS @if Truthiness or Falsiness

SCSS has criteria to judge the true or false value of an expression.

• The true or false is acceptable anywhere, however, other values can also be used.
• Further, the SCSS considers the false and null values of an expression as falsey and hence causes the conditions to fail.
• Contrary to it, all other values are considered truthy, hence, SASS considers them true and thus causes 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.