Welcome Guest! (App Version 3.1)

websitnero logo name

Sass Conditionals

@if and @else in Sass

In any programming language logic is given utmost importance and on basis of certain condition the flow of program is decided. As Sass adds programming functionalities to CSS to handle conditions and directed flow Sass presents forward @if and @else.

If statement always resolves to a boolean - true or false. If the condition inside the brackets (infront of if keyword) turns true then further code is executed, otherwise whatever is written inside @else will be executed.

Look at the example below:

main.scss:

$primary-color: #8a8a8a;
$secondary-color: #bababa;
$current-theme: "normal";
@if (current-theme == "dark"){
  $primary-color: #000;
  $secondary-color: #fff;
}
@else if (current-theme == "light") {
  $primary-color: #fff;
  $secondary-color: #000;
}
@else {
  $primary-color: #8a8a8a;
  $secondary-color: #bababa;
}

body {
  border: 1px solid #000;
  background: $primary-color;
  color: $secondary-color;
}
	

index.html:

Dark Theme

Normal Theme

Light Theme

Note: Keep in mind that along with @if and @else if there are more than 2 possibilities, you can use multiple @else if conditions followed by set of code to be executed if true.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.