Conditional constructions — SASS: Programming

If you have studied any programming language, you know that one of the most common elements in them is the conditional construct if/else. What does this construct allow you to do? A conditional construct allows you to execute a particular piece of code depending on whether the condition within that construct is true or not.

Before we go any further, let's deal with the concepts introduced above:

• A terminal construct is a construct that guides the script along one of several paths, depending on whether the condition within the construct is true or not.
• Condition is any expression that can be reduced to either true or false. For example, the expression 2 + 2 = 4 is true, but 2 + 5 = 1 is not.

Let's take a simple example with hixins. Suppose the designer sent us a layout with two different color schemes: light and dark. Depending on what is specified in the project settings, we need to use either one or the other color scheme.

Let's describe both color schemes the designer sent us in the card mixin. Let's try to make two schemes with the knowledge we have now:

@mixin card {
  // Colors for the light theme
  $primary-color: #f9f9f9;
  $text-color: #424242;

  // Colors for the dark theme
  $primary-color-dark: #161625;
  $text-color-dark: #e1e1ff;

  .card {
    .card-body {
      &.light {
        background: $primary-color;
        color: $text-color;
      }

      &.dark {
        background-color: $primary-color-dark;
        color: $text-color-dark;
      }
    }
  }
}

The result is a rather crude construction. We put the choice of color scheme on the classes light and dark. It turns out that for all elements we will have to use such constructions and add classes. This will lead to terrible confusion and constant problems due to forgetting to put a class for an element. The approach is totally workable, but would create additional problems. It's also possible to introduce more global classes light-theme or dark-theme for body, but that way we'll get large sections of code with different designs which are also hard to keep track of.

How can SASS help here? We can use conditional constructs and declare the initial setting of the project's theme as a separate variable in advance. Later on, that setting will affect the entire project. You agree that it would be much more convenient to control the theme selection by changing just one variable. So how to do it?

To do this, let's introduce a variable $dark-mode with a value of true. As we remember, this is a boolean data type which can take one of two values. In this case true means true. So we want to use the dark theme.

$dark-mode: true;

Now we can use the @if construct in which we put a condition on the truth of the variable $dark-mode in parentheses. This can be done using the == operator. All such operators will be discussed below. Let's return our myxin and add a condition.

$dark-mode: true;

@mixin card {
  // Colors for the light theme
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true) {
    // If the condition works, we just overwrite the values of the variables.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

What happened here? At the very beginning of the mixin, we defined the "default" base colors. These were the settings for the light theme. Below there is a conditional construct @if in which we check if the value of the $dark-mode variable is true. Since we set this value at the very beginning of our code, the variables $primary-color and $text-color inside the card mixin are overwritten with those specified in the body of the condition.

The @if operator produces one of two values:

• true — expression inside the operator is true and then we enter the body of the @if construct.
• false — expression inside the operator is false and then we ignore everything inside the @if construct.

The result of compiling the SASS file:

.card .card-body {
  background: #161625;
  color: #e1e1ff;
}

Comparison operators

In the last example, we saw one of the comparison operators ==. It indicates the equality of the left and right parts of the expression. If they are equal, it returns true and the compiler enters the body of the construct inside @if.

In addition to this, there are several other comparison operators that are important to know:

• != is not equal. The result is exactly the opposite of the == operator. If the left and right parts of the expression ** are not equal**, the result is true.
• > — the left side of the expression is more than the right side.
• >= — the left side of the expression is greater than or equal to the right side.
• < — the left side of the expression is smaller than the right.
• <= — the left side of the expression is less than or equal to the right side.

Where would we need such expressions? Suppose we have some font-size value. If this value is less than 16 pixels, then with a viewport width of 768px, it should be increased by half.

$main-font-size: 14px;

html {
  font-size: $main-font-size;
}

body {
  padding: 1rem 3rem;
}

@media (max-width: 768px) {
  @if ($main-font-size < 16px) {
    html {
      font-size: $main-font-size * 1.5;
    }
  }
}

If you compile this SASS file, you will get the following CSS code:

html {
  font-size: 14px;
}

body {
  padding: 1rem 3rem;
}

@media (max-width: 768px) {
  html {
    font-size: 21px;
  }
}

Now suppose that somewhere in the project we overwrote the value of $main-font-size and set its value to 16px:

$main-font-size: 14px;

html {
  font-size: $main-font-size;
}

body {
  padding: 1rem 3rem;
}

// 1000 lines of code later

$main-font-size: 16px;

// And a dozen more lines later

@media (max-width: 768px) {
  @if ($main-font-size < 16px) {
    html {
      font-size: $main-font-size * 1.5;
    }
  }
}

Let's compile this code and get the following CSS code:

html {
  font-size: 14px;
}

body {
  padding: 1rem 3rem;
}

Now the $main-font-size < 16px condition returned false and the compiler did not go into the body of the conditional construct, so the code inside the conditional construct was not processed.

Logical operators

In addition to comparison operators in SASS, there are also logical operators. There are much fewer of them, don't be scared :) Boolean operators allow you to combine several conditions into one big expression.

Let's go back to the color scheme example. Suppose we make separate styles for mobile devices, where a dark theme should be used. Let's introduce an additional variable in which we specify the device type. This will help us set properties only for a certain group of devices and compile styles for them.

$dark-mode: true;
$device: 'mobile';

@mixin card {
  // Colors for the light theme
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true) {
    // If the condition works, we just overwrite the values of the variables.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

How do we verify that both conditions for choosing the dark theme are true? We can create a conditional construct within a conditional construct (hello to the movie Inception).

$dark-mode: true;
$device: 'mobile';

@mixin card {
  // Colors for the light theme
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true) {
    @if ($device == 'mobile') {
      // If the conditions work, we just overwrite the values of the variables.
      $primary-color: #161625;
      $text-color: #e1e1ff;
    }
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

Caution: Don't get carried away with nested conditional constructions. Such "staircases" can be very difficult to read. In addition, it is very easy to make a mistake when adding or removing a condition.

We can get rid of this staircase with the and logical operator. It will combine both conditions and return true provided both expressions return true. We just have to add the keyword and between the two expressions as follows:

$dark-mode: true;
$device: 'mobile';

@mixin card {
  // Colors for the light theme
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true and $device == 'mobile') {
    // If the conditions work, we just overwrite the values of the variables.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

There are a total of three logical operators in SASS:

• and ­— the "AND" logical operator. Returns true if both expressions are true.
• or — the "OR" logical operator. Returns true if at least one expression is true.
• not — is a logical negation operator "NOT". Returns true if expression is false.

Operator else

At the beginning of the lesson, it was said that we were studying the conditional construct if/else. With @if we got the hang of it, now we have one question: what is @else? It's actually simpler than it may seem at first sight. The code block inside @else will be executed if the expression in @if is false. All we need to do is add a construct @else after the @if block. In the color scheme example, we can rewrite the code as follows:

$dark-mode: true;
$device: 'mobile';

@mixin card {
  $primary-color: white;
  $text-color: black;

  // Variables are created before if/else conditions, and only change in conditions

  @if ($dark-mode == true and $device == 'mobile') {
    // If the conditions work, we just overwrite the values of the variables.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  } @else {
    // Colors for the light theme
    $primary-color: #f9f9f9;
    $text-color: #424242;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

That's the tricky part. In this way, we can select the block of code that will be executed depending on the condition inside the @if operator. Note, however, that you can often do without the @else operator. In all but the last example, we overwrote the value of a variable if a dark theme was chosen. This is the right approach because this way we are sure that some colors will be set by default and we trivialize less code.

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“