Conditionals in SASS

This article explains conditionals in SASS.

We clearly explain everything from the basics to advanced uses of conditionals with the @if, @else if, and @else directives, with practical examples.

YouTube Video

Conditionals in SASS

SASS is a stylesheet language that extends CSS, and you can control styles flexibly using conditionals. In SASS, you can use @if, @else if, and @else to switch the output of styles at compile time.

Basic conditional syntax

Basic conditionals in SASS are written with the following syntax.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if evaluates the first condition, and if it is false, the @else if or @else blocks are evaluated in order.

Simple conditional example

In the following example, the background color switches based on the $theme variable.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

Compiled CSS

1body {
2  background-color: #333;
3  color: #fff;
4}

• When $theme is "dark", a dark background and white text color are applied.

Combining conditionals with calculations

Conditionals handle not only string and color comparisons, but also numeric calculations.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

Compiled CSS

1.container {
2  max-width: 1200px;
3}

• Numeric comparisons are also possible, and when $width exceeds 1000px, max-width: 1200px is output.

Nested conditionals

By nesting conditionals, you can express complex conditions.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

Compiled CSS

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• Nesting conditionals enables styling based on both theme and size.

Using conditionals in custom functions

Using conditionals inside custom functions can improve reusability.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

Compiled CSS

1.card {
2  background-color: #333;
3}

• By encapsulating conditionals in functions, you can increase reusability and maintainability.

A practical example - Switching designs

Let’s look at an example of switching the overall design based on certain conditions.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

Compiled CSS

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• You can dynamically switch the color scheme of the entire page according to the theme variable.

Notes and best practices

When using SASS conditionals, you can consider the following points.

1. Keep conditionals simple

   Complex nesting hurts readability, so leveraging functions and mixins helps keep things simple.

2. Abstract with variables and functions

   If you use similar conditions in multiple places, consolidating them into variables or functions improves maintainability.

3. Prevent bloated logic

   Unify design rules as much as possible and avoid overusing conditionals.

Conclusion

Conditionals in SASS are a very effective tool for creating flexible, dynamic styles. Here, we explained everything step by step from the basics to practical examples. When using conditionals in real projects, design with reusable code in mind while taking care not to overcomplicate things.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video