SASS/SCSS Operators
SASS provides us with a set of operators that range from mathematical operations like +
(addition), 
(subtraction), /
(division), etc, along with various other types of operators like ==
(equality), !=
(not equals), and
operator, or
operator, etc. Sass has a pretty standard order of operations, from tightest to loosest.
SASS makes it fun writing CSS rules by providing us access to SASS operators using which we can produce a dynamic styling rule. As mentioned above, the order of these operators execution is standard, but let's take a few examples to understand the same.
@debug 1 + 2 * 3 == 1 + (2 * 3) // true
@debug true or false and false == true or (false and false) // true
Don't worry about the @debug
rule, it is just used to see the final value of any expression so that you can debug if you are not getting the desired output.
So as you can see the simple rule of BODMAS is being followed in case of mathematical operators in an expression. We can also use parentheses to structure any expression while using operators in SASS. The operation defined inside the parentheses is always evaluated before the outside operation, for example:
@debug (1 + 2) * 3 // 6
@debug ((1 + 2) * 3 + 4) * 5 // 65
Now that we understand how operators are evaluated, let's dive into the various different types of operators available in SASS.
SASS Operators
The following are the types of operators available in SASS.

Mathematical Operators

Equality Operators

Relational Operators

String Operators

Boolean Operators
We will cover them one by one, listing down all the operators along with a few examples.
SASS Mathematical Operators
SASS supports all the mathematical operators required for performing basic mathematical operations.
Operators  Usage and Description 

+ 
<expression> + <expression> , adds the value of the first expression with the second expression. 
 
<expression>  <expression> , subtracts the value of the second expression from the first expression. 
/ 
<expression> / <expression> , divides the value of the first expression by the value of the second expression. 
* 
<expression> * <expression> , multiplies the value of the first expression with the value of the second expression. 
% 
This is the Modulo operator. <expression> % <expression> , returns the remainder of the division of the value of the first expression by the value of the second expression. 
Let's take a few examples:
@debug 10s + 15s // 25s
@debug 1in  10px // 0.8958333333in
@debug 5px * 3px // 15px*px
@debug (12px/4px) // 3
@debug 1in % 9px // 0.0625in
We can also use plain numbers with numbers of any unit like this:
@debug 50px + 50 // 100px
@debug 12px * 10 // 120px
In SASS, mathematical operators are meant for performing operation on all units of data used in SASS like px, in, etc along with color Hexa codes, so if you perform any mathematical operation on two Hexa code for colors it will produce some other Hexa code. Also, we can use the

operator to define negative values too like 5px etc(make sure there is no space between the
operator and the number if representing a negative value.)
Also, apart from their basic operations, +
, 
and /
operators are also used for String concatenation in SASS.
SASS Mathematical Operators Examples:
Let's see a few examples to understand the usage of these operators. The example below uses addition, subtraction, multiplication and division operators.
.maindivision{
margin: 100px + 200px;
padding: 1000px / 100px  10px;
height: 5px * 3px;
width: 1in % 9px;
}
Similarly, addition can also be used for Hexa color codes,
.maindivision{
backgroundcolor: #111100+#001111;
}
After compiling this the result CSS will be,
.maindivision{
backgroundcolor: #112211;
}
2. SASS Equality Operators
SASS supports two equality operators, namely, equal to and not equal to. In the table below we have listed both the equality operators available in SASS:
Operators  Usage and Description 

== 
Equal to. <expression> == <expression> , returns whether the value of the first expression is equal to the value of the second expression. 
!= 
Not Equal to. <expression> != <expression> , returns whether the value of the first expression is not equal to the value of the second expression. 
The operators behave differently for values of different types. So we should use them carefully.

If you are comparing two numbers, then they are equal if they have the same value and the same unit or data type. For different units, SASS performs the conversion automatically if possible.

Colors are equal if they have the same red, green, blue and alpha values.

true
,false
andnull
data units are only equal to themselves. 
Similar rules are followed for complex types like List and Maps. All the values present inside them are compared one by one with each other against value and unit.
Let's take an example to see usage of SASS equality operators:
@debug 1px == 1px // true
@debug 1px != 1em // true
@debug 1 != 1px // true
@debug 96px == 1in // true. SASS performs automatic conversion
3. SASS Relational Operators
SASS supports the following relational operators:
Operators  Usage and Description 

< 
<expression> < <expression> , returns whether the value of the first expression is less than the value of the second expression. 
> 
<expression> > <expression> , returns whether the value of the first expression is greater than the value of the second expression. 
<= 
<expression> <= <expression> , returns whether the value of the first expression is less than or equal to the value of the second expression. 
>= 
<expression> >= <expression> , returns whether the value of the first expression is greater than or equal to the value of the second expression. 
Let's see a few examples for the usage of SASS relational operators:
@debug 10 > 5 // true
@debug 11px < 21px // true
@debug 96px >= 1in // true
@debug 10px < 17 // true
4. SASS String Operators  String Concatenation
There are no special operators in SASS for performing string operation. The mathematical operators +
, 
and /
when used with strings perform the string operations.

<expression> + <expression>
returns a string that contains both expressionsâ€™ values. If either value is quotedstring the result will be quoted; otherwise, it will be unquoted. 
<expression> / <expression>
returns an unquoted string that contains both expression's values, separated by/
. 
<expression>  <expression>
returns an unquoted string that contains both expression's values, separated by
. This is a legacy operator but still works.
Let's take a few examples,
fontfamily: "Arial" + " Helvetica" + " sansserif"; // output will be Arial, Helvetica, sansserif
fontsize: 10px / 5px; // output will be 10px/5px and not 2 px
fontfamily: sans+serif; // output will be sansserif
fontfamily: sans  serif; // output will be sansserif
5. SASS Logical Operators
Logical operators such as and
, or
, and not
are also available in SASS.
not <expression>
returns the negation or opposite of the value of the expression provided.<expression> and <expression>
returnstrue
if the values of both left expressions and right expression aretrue
, andfalse
if either isfalse
.<expression> or <expression>
returnstrue
if either expression's value istrue
, andfalse
if both arefalse
The examples given below show the usage of these operators:
@debug not true; // false
@debug not false; // true
@debug true and true; // true
@debug true and false; // false
@debug true or false; // true
@debug false or false; // false
So in this tutorial, we learned about various SASS operators. You can use different SASS operators to write dynamic CSS rules and make your styling rules more functional.