Sass @if @else Rules

Last Updated:

Sass @if @else Rules

In Sass @if @else rules, the @if rule controls whether or not to evaluate its block. The expression usually returns either true or false—if the expression returns true, the block of code under @if rule is evaluated, and if the expression returns false, the block of code under @else rule is evaluated.

Example

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

Syntax

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

Real World Example

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

Example

SASS TO CSS CONVERTER
@mixin theme-colors($light-theme: true) { @if $light-theme { background-color: white; color: black; } @else { background-color: black; color: white; } } .banner { @include theme-colors($light-theme: true); body.dark & { @include theme-colors($light-theme: false); } }

Share this Page

Meet the Author