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:

Important Facts:

1. The addition ( + ) operator can also be used to concatenate strings but it will work only for numbers with compatible units.

For example:

h2 { font-size: 15px + 2em; // Show error due to incompatible units font-size: 15px + 2; // 17px }
2. Multiplication of two numbers of the same unit is not valid CSS:
h2 { font-size: 5px * 2px; // invalid CSS }
3. The division operator is an integral part of the CSS shorthand properties.

For example:

font: 16px / 24px Arial sans-serif; background: url("http://example.com") no-repeat fixed center / cover;

But Sass prefers forward slash (/) to perform the division operation. Let?s take an example to see how Sass understands this symbol.

h2 { font-size: 16px / 24px // Outputs as CSS font-size: (16px / 24px) // Uses parentheses, does division font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS font-size: $base-size / $line-height // Uses variables, does division opacity: random(4) / 5; // Uses a function, does division padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division }
4. Sass follows operator precedence according to BODMAS formula.
• 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.

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:

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:

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: