The `if` function in SASS

This article explains the if function in SASS.

We will walk through everything from the basics of the if function to advanced techniques, step by step.

YouTube Video

The if function in SASS

The if() function is a simple conditional function provided by SASS that returns one of two values based on a boolean condition. It is similar to JavaScript's ternary operator.

Syntax

The syntax is as follows:.

1// if(condition, trueValue, falseValue)

• If condition is true, it returns trueValue; if false, it returns falseValue.

Basic Usage

For example, you can use the if() function to change the background and text colors depending on whether the theme is dark or light.

Sample Code

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• If the $theme variable is "dark", the background becomes black with white text; if it is "light", the background becomes white with black text.

The generated CSS

1body {
2  background-color: black;
3  color: white;
4}

• Since the $theme variable is "dark", the background is black with white text.

Differences between the @if statement and the if() function

Sass provides an @if statement and an if() function for conditional branching, but they are used for different purposes.

Sample Code

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• The @if statement controls which code is output at Sass compile time.
• By contrast, the if() function returns a value and is used to switch values dynamically within expressions.

The generated CSS

1body {
2  background-color: black;
3  color: white;
4}

• In this example, since $theme is "dark", a black background and white text color are applied.
• The two major differences are that the @if statement controls structure, and the if() function returns a value.

Using nested if functions

When you need complex branching, you can nest if functions.

Sample Code

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• If $theme is "dark", it returns black; if "light", it returns white; otherwise, it returns the default value ($custom-color).

The generated CSS

1body {
2  background-color: blue;
3}

• Since the $theme variable is custom, the background color is blue.

Practical use cases

Theme switching

Below is an example that changes button styles based on the theme.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• This code is a SASS conditional example that switches a button's background, text, and border colors based on the value of the $theme variable. The if() function is used to dynamically set styles for dark and light themes.

The generated CSS

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• By switching the theme, you can uniformly change the overall design.

Advanced example: Dynamically setting color contrast

Let's look at an example that automatically sets the text color based on the background color.

Sample Code

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• The color.channel() function is used to obtain the background color’s lightness (lightness). If that value is greater than 50%, black is chosen; if it is smaller, white is chosen as the text color, automatically optimizing contrast with the background.

The generated CSS

1body {
2  background-color: #000;
3  color: white;
4}

• By using the if() function, you can implement flexible styles that account for design accessibility, such as adjusting contrast.

Combining with @function

Using the if function inside an @function allows for even more flexible style design.

Sample Code

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• This code demonstrates using if() within an @function to return appropriate colors based on the theme and color type. This enables consistent and reusable style design for each theme.

The generated CSS

1body {
2  background-color: black;
3  color: white;
4}

• By creating and using helper functions that leverage the if() function, you can improve the maintainability of the entire project.

Notes

1. The if function cannot be used with dynamic values Because CSS itself is a static language, the if function determines values at the time SASS is compiled. For runtime conditional logic, you need to use JavaScript.

2. Prioritize readability Because nested if functions can become complex and hurt readability, you can use SASS @mixin and @function as needed to organize your code.

Conclusion

SASS's if function is a powerful tool that returns different values depending on conditions. It is useful not only for simple conditionals, but also in many scenarios such as theme switching and dynamic style settings. However, when dealing with complex conditions, pay attention to readability and leverage @mixin and @function to improve maintainability.

By mastering the if function, you can achieve more efficient and flexible style design.

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