Sass @if @else Rules

You are Here:

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); } }

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.

Share this Page

Meet the Author