Sass @else if Rules
You are Here:
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);
}
Reminder
Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Sass.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
