SASS else if Directive

by Online Tutorials Library July 14, 2022

Sass @else-if Directive

The Sass @else-if directive is used when @if directive is failed. If it is failed @else directive is used.

SCSS Syntax:

 $type: monster; p {   @if $type == ocean {     color: blue;   } @else if $type == matador {     color: red;   } @else if $type == monster {     color: green;   } @else {     color: black;   } } 

After compilation, it will create a CSS file having following code:

CSS Syntax:

Sass @else-if Directive Example

Let’s take an example to demonstrate the usage of Sass @else-if directive. We have an HTML file named “simple.html”, having the following data.

HTML file: simple.html

       <title>@if Directive Example</title>    <link rel="stylesheet" id="dcd43b5dedb4a32d40b84bab03593e06" data-soledad_pagespeed-delay data-href="../simple.css"/>
<div class="container">
<h2>Welcome to Tutor Aspire</h2>
<p>A solution of all technology. </p>
</div>
<p>   </p>

Create a SCSS file named “simple.scss”, having the following data.

SCSS file: simple.scss

 $type: monster; p {   @if $type == ocean {     color: blue;   } @else if $type == matador {     color: red;   } @else if $type == monster {     color: green;   } @else {     color: black;   } } 

Put the both file inside the root folder.

Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.

Execute the following code: sass –watch simple.scss:simple.css

It will create a normal CSS file named “simple.css” in the same directory automatically.

For example:

Sass Else if1.png

The created CSS file “simple.css” contains the following code:

Now, execute the above html file, it will read the CSS value.

Output:

Sass Else if2.png

Next TopicSass @for Directive

SASS else if Directive

Sass @else-if Directive

Sass @else-if Directive Example

Advantages and Disadvantages of RxJS

Feature of Scala

You may also like