dots Created with Sketch.
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:

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to create a flip effect with CSS?CSSCreate a currency (dollar) to coins convertor in ReactReactHow to create a simple drop down menu using JavaScript and CSS?CSSOrder By and Group By in PostgresPostgresWhy do we need HAVING Clause in SQL?SQL/MySQLFETCH clause in PostgreSQLPostgresHow to Access a Global Variable From Inside a Function in PHP?PHPKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousHow to get front page or home page ID in WordPress?WordPressHow to add Go Back button in Swift 5?SwiftWordPress: How to get ACF field values from another post?WordPressHow to Commit and Rollback Changes in SQL?SQL/MySQL