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

1. 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.

1.1. 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.

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

2. 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.

2.1. 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.

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

3. 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.

3.1. 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.

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

4. 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.