SASS/SCSS #15: Operators in SASS/SCSS

Welcome back to series about SASS/SCSS. If you like this topic, this is a link for you follow other articles. Series about SASS/SCSS

In this article, we will continue to learn about Operators in SASS/SCSS. And more specifically we will go into Numberic Operators.

Table of contents:

What is Numberic Operators?
Numberic Operators with unit and unitless
Numberic Operators with numbers have different units
Unary operator
Slash, Division or Separated value

Let’s go to the contents!

What is Numberic Operators?

Numberic Operators are Operators that represent the calculations contained in Numbers. We can mention such as add “+”, substracts “-“, multiplies “*”, and divided “%” also known as Modulus Operator.

Numberic Operators with unit and unitless

Unitless numbers can be used with numbers of any units. This means we can add, subtract, multiply or divide a number has units with a number doesn't have units. Let's see an example:

// index.scss

@debug 10px+10; // => 20px

@debug 10px - 5; // => 5px

@debug 10px * 2; // => 20px

@debug 10px % 2; // => 0px

We can see that; we take the number “10” with unit “px” we perform the math in turn. We all get the results. We can know that we can perform operations between Unitless numbers with numbers of any units.

We just did the right side that we use numbers of any units as calculations with Unitless numbers. Now we will do the reverse, what if we put Unitless numbers first and numbers of any units behind. Let's see an example to get the answer.

// index.scss

@debug 5+5px; // => 10px

@debug 10 - 5px; // => 5px

@debug 10 * 5px; // => 50px

@debug 10 % 5px; // => 0px

The result we get is the same as if we put numbers of any units at the top. So, we know that the placement for Unitless numbers and numbers of any units will not be different from each other.

Numberic Operators with numbers have different units

In the above we were able to determine that, Numberic Operators can use between Unitless numbers with numbers of any units. Next, we will experiment with how we use numbers have different units. In this section, we will divide it into two cases, the first is Numbers with incompatible units, and Numbers with compatible units. First, we check Numberic Operators with incompatible units. We need to understand incompatible units, which are numbers have different units and cannot convert between us.

// index.scss

@debug 10px+10rem; // => 10px and 10rem have incompatible units.

@debug 10px - 5em; // => 10px and 5em have incompatible units.

@debug 10px * 2em; // => 10px and 2rem have incompatible units.

@debug 10px % 2rem; // 10px and 2rem have incompatible units.

We have learned that the math operations that we perform are completely impossible. We all get incompatible units’ error. Next, we will use numbers have compatible units. We know that “1inch=96px”, and both these units are compatible units, which means both can convert between them. Let's see an example of this case:

// index.scss

@debug 1in+10px; // => 1.1041666667in

@debug 1in - 5px; // => 0.9479166667in.

We see that we can use add and subtract for numbers with compatible units. One question you might ask is why I don’t use multiply or divide. A very good question, we apply a little math or physics knowledge, we know that when two units multiply or divided the result will be “unit1*unit2” or “unit1/unit2”. Similarly, when we use multiply or divide for numbers have diferrent units we will get the same result. Let's see an example:

// index.scss

@debug 1in*10px; // => 10in*px

@debug 1in%5px; // => 0.0104166667in/px

We can see the result is that with the unit "in*px" this means the area calculation. However, let's go back to the problem, the code of SASS / SCSS when compiled will convert to CSS form. You know that CSS can't understand units like that at all. The above part is to explain to you that you can use multiply or divide numbers have different units. However, you should not use it. If you want to use it you can use Unitless numbers with numbers have any units.

Unary operator

You can also write “+” and “-“ as unary operators, which take only one value. If you write “+” before <expression>, this means “+<expression>” returns the expression’s value without changing it. If you write “-“ before <expression>, this means “-<expression>” returns the negative version of the expression’s value. Let's go through some examples to better understand this part.

// index.scss

@debug -(1 + 2); // => -3

@debug +(2 - 1); // => 1

@debug -(2 * 1); // => -2

@debug +(2 / 1); // => 2

You can see that if we write “+” before <expression> the result of the expression wasn’t changed. Conversely, if we put the "-" sign before <expression>, the result we get is negative version.

We see that, everything is quite simple. However, to be able to use unary operators well, we need to know that. Unary operator can refer to both substraction and unary negation, it can be confusing which is which in a space-separated list. To be safe:

Always write spaces on both sides of “-“ when subtracting.

// index.scss

@debug 1 - 2 - 3; // => -4

@debug 1 -2 - 3; // => 1 - 5

@debug 1-2 - 3; // => -4

@debug 1- 2 - 3; // => -4

@debug 1 - 2- 3; // => -4

@debug 1 - 2-3; // => -4

@debug 1 - 2 -3; // => -1 - 3

@debug 1 -2 -3; // => -1 -2 - 3

We have an assortment of Numberic operators, you would say that this is a substracting in Numberic operator, which is true, however, we have already discussed the unary operator. You can see that the result of some operations is not “-4” at all but Lists. Output cases with data type of Lists are the "-" sign next to <expression> and write it without space. So when using Numberic operators you need to pay attention to the unary operator. For best results, when you use math operations, write space both side of “-“ when subtracting.

Write space before “-“ but not after for a negative number or a unary negation. As in the example above if you write space before “-“ but not after, that <expression> will become a negative expression. In the example above number will become negative number and substracting becomes Lists.

Wrap unary negation in parentheses if it's in a space-separated list. Let's look at the example, if we use parentheses for a number, what will happen?

// index.scss

$number: 2;

@debug 1 -($number)+3; // 2

@debug 1 - ($number)+3; // 2

@debug 1 - $number+3; // 2

@debug 1 -$number+3; // 2

@debug 1 (-$number)+3; // 1 1

Awesome! The problems that we have mentioned in the above problem is that we need to consider the space before and after “-“. To improve this we just need to use parentheses. Most of the parentheses results return the result of the calculation substracting. If we want to turn it into Lists, we just need to actively add the "-" sign in the parentheses. We can see in the example above that all cases receive the result of substracting. The other case is that we want to become Lists.

Slash, Division or Separated value

In other programming languages, you know that “/” is division where we take the integer part, and “%” is division where we take the remainder. However, in SASS as well as in CSS, we can also use "/" as the Saparated value. We have the following example:

/* index.css */

body {

font: 15px / 20px;

background-color: hsl(20 20% 20% / 0.2);

}

We can completely use “/” as the separated value part. This becomes extremely inconvenient in SASS. First we will see the cases where “/” becomes division.

// index.scss

$number: 20 / 2;

@debug $number; // => 10

@function division($number1, $number2) {

@return $number1 / $number2;

}

@debug division(20, 2); // => 10

@debug (20/2)+5; // => 15

@debug 20px/10px+5; // => 7

Result can be store in a variable or returned by a function.

Result will be occured in parentheses, unless those parentheses are out side a list that contains the operation.

Result is used as of another operation.