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.

1. Mathematical Operators

2. Equality Operators

3. Relational Operators

4. String Operators

5. 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.

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.

.main-division{
    margin: 100px + 200px;
    padding: 1000px / 100px - 10px;
    height: 5px * 3px;
    width: 1in % 9px;
}

Similarly, addition can also be used for Hexa color codes,

.main-division{
    background-color: #111100+#001111;
}

After compiling this the result CSS will be,

.main-division{
    background-color: #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:

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 and null 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:

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 quoted-string 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,

font-family: "Arial" + " Helvetica" + " sans-serif";  // output will be Arial, Helvetica, sans-serif

font-size: 10px / 5px;   // output will be 10px/5px and not 2 px

font-family: sans-+serif;   // output will be sans-serif

font-family: sans - serif;   // output will be sans-serif

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> returns true if the values of both left expressions and right expression are true, and false if either is false.
• <expression> or <expression> returns true if either expression's value is true, and false if both are false

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.