Sass Operators
Sass facilitates you to do basic mathematical operations in the style sheet. It is very simple to apply the appropriate arithmetic symbol.
Sass provides some standard math operators i.e. +, -, *, /, and %.
Let’s take an example to do some simple math to calculate width for an aside and article.
SCSS Syntax:
Equivalent Sass Syntax:
This will create a very simple fluid grid, based on 960px. The Sass operation will do something like take pixel values and convert them to percentages without much hassle.
It will generate CSS like this:
Sass Operators List
1) Assignment Operator
In Sass, the colon ( : ) operator is used to define a variable.
Syntax:
2) Arithmetic Operators
These are some standard math operators used to perform arithmetical operations. Sass supports the following arithmetic operators.
A list of arithmetic operators:
| operator | description |
|---|---|
| + | this operator is used for addition. |
| – | this operator is used for subtraction. |
| * | this operator is used for multiplication. |
| / | this operator is used for division. |
| % | this operator is used for remainder. |
Important Facts:
- The addition ( + ) operator can also be used to concatenate strings but it will work only for numbers with compatible units.
- Multiplication of two numbers of the same unit is not valid CSS:
- The division operator is an integral part of the CSS shorthand properties.
- Sass follows operator precedence according to BODMAS formula.
For example:
For example:
But Sass prefers forward slash (/) to perform the division operation. Let?s take an example to see how Sass understands this symbol.
- Expressions within parentheses are evaluated first.
- The multiplication (*) and division (/) operators have a higher priority than the addition (+) and subtraction operators (-).
See this example:
3) Equality Operator
Equality operators are used in conditional statements. These operators are used to test if two values are same or not and return Boolean values.
Sass supports the following equality operators.
| Operator | Description |
|---|---|
| = = | It is equal to operator. |
| != | It is not equal to operator. |
These are supported for all types.
Let’s take two examples to understand it well. The equality operator ( ==) is used in first example to test the type of the $font argument and print the appropriate message.
See this example:
The generated CSS will have the following code:
The second example defines a list and checks the length of its items. Here, remainder (%) operator is used to evaluate their length and then set the color property to the h2 element.
See this example:
The generated CSS will have the following code:
Note: Sass doesn’t support the strict equality operator (===) like other languages.
4) Comparison Operator
Comparison operators are similar to equality operators but they are only used to compare numbers.
A list of comparison operators supported in Sass:
| Operator | Description |
|---|---|
| > | It specifies a greater than comparison operator. |
| >= | It specifies a greater than or equal to comparison operator. |
| < | It specifies a less than comparison operator. |
| <= | It specifies less than or equal to comparison operator. |
See this example:
After the compilation, the resulting CSS will have the following code.
5) Logical Operators
Logical operators are used to test multiple conditions within a conditional expression.
A list of logical operators supported in Sass:
| Operator | Conditions | Description |
|---|---|---|
| And | x and y | It specifies true if x and y both are true. |
| Or | x or y | It specifies true if either x or y is true. |
| Not | x | It is true if x is not true. |
Let’s take an example to understand it well:
This example contains button states as keys and the corresponding colors as values. Then, we specify a condition to evaluate its length. If the entire condition is true, it applies background-color to the h2 element.
Sass Syntax: