Code Editor
main.css
Web Browser
Learn
Functions and Operations

Conditionals

In Sass, if() is a function that can only branch one of two ways based on a condition. You can use it inline, to assign the value of a property:

width: if( $condition, $value-if-true, $value-if-false);

For cases with more than two outcomes, the @if, @else-if, and @else directives allow for more flexibility.

@mixin deck($suit) { @if($suit == hearts || $suit == spades){ color: blue; } @else-if($suit == clovers || $suit == diamonds){ color: red; } @else{ //some rule } }

The mixin above is a good example for how we would want to handle the coloring of a deck of cards based on a suit condition.

Report a Bug
If you see a bug or any other issue with this page, please report it here.