Sass @if Rules

Last Updated:

Sass @if Rules

Sass @if rules controls whether or not to evaluate a block. The expression usually returns either true or false—if the expression returns true, the block is evaluated, and if the expression returns false it's not.

Example

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

Syntax

@if expression{ // if block };

Real World Example

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

Example

SASS TO CSS CONVERTER
@mixin avatar($size, $circle: false) { width: $size; height: $size; @if $circle { border-radius: $size / 2; } } .square-av { @include avatar(100px, $circle: false); } .circle-av { @include avatar(100px, $circle: true); }

Share this Page

Meet the Author