Sass @else if Rules

Last Updated:

Sass @else if Rules

Sass @else if rule's block is evaluated only if the preceding @if's expression returns false and the @else if's expression returns true.

Example

SASS TO CSS CONVERTER
p{ @if 2 < 1 { border: 1px solid; } @else if 5 < 7 { border: 2px dotted; } @else { border: 3px double; } }

Syntax

@if expression{ // if block } @else if expression{ // else if block } @else{ // else block }

Real World Example

The following example will clearly define the scenario to use @else if rules.

Example

SASS TO CSS CONVERTER
@mixin triangle($size, $color, $direction) { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: $size / 2; @if $direction == up { border-bottom-color: $color; } @else if $direction == right { border-left-color: $color; } @else if $direction == down { border-top-color: $color; } @else { border-right-color: $color; } } .next { @include triangle(5px, black, right); }

Share this Page

Meet the Author