Sass/SCSS if, else if & else (Conditional Control) Tutorial

What is conditional control

Sass allows us to control the flow of our scripts through specific expressions that evaluate conditions.

Based on the result of these conditions, Sass will execute certain sections of specified code.

The if conditional statement

An if statement will evaluate a condition. If the condition proves true, the compiler will execute the if statement’s code block.

If the condition proves false, the compiler will move on to code outside and below the if statement’s code block.

An if statement is written with the @if rule, followed by the condition we want to evaluate and a code block.

@if condition {
  // if condition proves true
  // execute everything in the
  // code block
}

$circle: true;
$size: 100px;

.user__avatar {
  width: $size;
  height: $size;

  @if $circle == true {
    border-radius: $size / 2;
  }
}

In the example above we check to see if the value of $circle is true.

In this case it proved true so the code in the if statement’s code block executed and the CSS was compiled with a radius of 50px .

.user__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

When checking for true or false values, we don’t need to specify our equality operator == or the keywords true or false .

$circle: true;
$size: 100px;

.user__avatar {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

The conditional else if ladder

When we have multiple conditions that need to be evaluated with their own execution code, we use the else if ladder.

The compiler will move to evaluate each if statement in the ladder when it’s done with the previous one.

To write a conditional else if statement, we add another if statement below our first, separated by the else keyword.

@if condition-1 {
  // if condition-1 proves
  // true execute this code
}
@else if condition-2 {
  // otherwise, evaluate if
  // condition-2 is true
}
@else if condition-3 {
  // otherwise, evaluate if
  // condition-3 is true etc.
}

$border: left;

.bordered {

  @if $border == top {
    border-top: 1px solid #000;
  }
  @else if $border == right {
    border-right: 1px solid #000;
  }
  @else if $border == bottom {
    border-bottom: 1px solid #000;
  }
  @else if $border == left {
    border-left: 1px solid #000;
  }
}

The examples above will check which side we want our border to be based on the value in the $border variable.

.bordered {
  border-left: 1px solid #000;
}

When the if statement evaluated to false, the compiler started to move down the ladder to evaluate the next if statement until it got to the condition that proved true.

note The else if ladder cannot stand on its own. It has to be preceded by an if statement.

The else fallback statement

The else statement works as a catch-all fallback for anything that isn’t covered by an if statement or else if ladder.

Because it acts as a catch-all, the else statement doesn’t have a conditional block, only an execution code block.

@if condition {
  // if condition proves
  // true execute this code
}
@else {
  // otherwise, execute this
  // else code block
}

$dark-theme: true;

@if $dark-theme {
  color: #dedede;
  font-weight: 300;
  background-color: #191919;
}
@else {
  color: #191919;
  font-weight: 400;
  background-color: #fafafa;
}

note The else statement cannot stand on its own either. It must be preceded by an if statement or an else if ladder. The else fallback must also be the last statement in a conditional chain, we cannot have an else if ladder below it.

True and False

Sass true and false values are not the same as those in traditional programming languages.

In Sass, a false value can only be false or null . Any other value, like empty strings, lists and the number 0, is considered to be a true value.

Summary: Points to remember

• Conditional statements allow us to control the flow of our scripts by evaluating conditions and executing code based on the result.
• The if statement will evaluate if a condition is true or false and execute its code block if the condition is true.
• The else if ladder statements are secondary evaluations done after the initial if evaluation proves false.
• The else fallback statement acts as a catch-all that executes if any other evaluations in the chain prove false.
  • The else statement doesn’t have a conditional block.
• Sass considers only false and null to represent falsehood, any other value is considered to be a true value.