Yogesh Chauhan's Blog

How to use @if and @else in SCSS?

in SCSS on June 15, 2021

if-else rule in SassScript is similar to if-else rule in any other programming language. Two blocks. Once for the condition success and another for everything else.


@if  { 
  ...
} @else{
  ...
}

We use if-else statement to control what to execute in different scenarios. Just like any other programing language, if-else returns true for the satisfied condition and false if not.

This is how we can easily place either a circle or a square using just if.

@if Example in SCSS


@if and @else Example in SCSS


Add few @else ifs

Once you add @else if, the blocks will only execute when the preceding @if‘s condition is the false and and the @else if’s condition is true.

If none of the conditions/expressions are true then it will execute the last @else block by default, if you add the @else block.

Let’s modify the first example:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
List of WordPress directories functionsWordPressTackle Accessibility in React with JSXReactHow to render Lists in React?ReactHow to use @if and @else in SCSS?SCSSAll different methods for accessing elements in the DOM using JavaScriptJavaScriptClasses in JavaScript: The BasicsJavaScriptA Quick Guide to Object-Oriented Programming in PHPPHPHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?AngularWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousOverview of Drupal and how it worksDrupalWhat are Big Data Clusters in SQL Server?SQL/MySQLSimple Page Hit Counter in PHPPHP