Sass/SCSS Operators Tutorial

What are operators

Operators are one or more symbols in Sass that is special to the compiler and allows us to perform various operations within our application.

As an example, let’s consider the + symbol. The + symbol is an operator to perform arithmetic on two or more numeric values.

But, when used on two or more strings, the + operator will combine (concatenate) them into a single string.

Operators in Sass can be classified based on two criteria.

1. The number of operands.

• If an operator takes a single operand, it’s called a unary operator.
• If it takes two operands, it’s called a binary operator.
• If it takes three operands, it’s called a ternary operator.

2. The type of operation performed.

Based on the operation, an operator can be called an arithmetic operator, an assignment operator, a comparison (relational) operator, or a logical (conditional) operator.

Arithmetic operators

Sass supports the following the arithmetic operators.

Assignment operators

Sass supports the following assignment operators.

Comparison (relational) operators

Sass supports the following comparison operators.

Logical (conditional) operators

Sass supports the following comparison keywords as operators.

Other: The negation operator

Typically, if we want to to turn a positive number into a negative number, we would have to multiply that number by -1.

$positive: 1;
$negative: $positive * -1;

p {
  margin-left: #{$negative}px;
}

p {
  margin-left: -1px;
}

The negation operator can turn a number negative simply be prefixing it with the - operator.

$positive: 1;
$negative: -$positive;

p {
  margin-left: #{$negative}px;
}

p {
  margin-left: -1px;
}

Other: The concatenation operator

When working with arithmetic, the + operator will perform an addition. But, when working with strings, the + operator will combine (concatenate) the strings together.

$content: "\2713" + " ";

a:visited:before {
  content: "#{$content}";
}

In the example above we concatenate the checkmark symbol with a space and add it before visited links.

@charset "UTF-8";
a:visited:before {
  content: "✓ ";
}

Other: The ternary operator

Sass does not have a ternary operator or at-rule.

The ternary operator is a shorthand method of writing a if/else statement that only contains a single execution statement, typically found in general programming languages like Java .

Operator precedence

Certain operators in Sass will have higher precedence than others.

As an example, let’s consider the precedence of the multiplication and addition operators.

5 + 3 * 2

If we read the calculation from left to right, we would do the addition first. But, the multiplication operator has a higher precedence than the addition operator, so it will do that part of the calculation first.

// correct
3 * 2 = 6
6 + 5 = 11

// incorrect
5 + 3 = 8
8 * 2 = 16

We can change the operator precedence by wrapping operators in parentheses.

(5 + 3) * 2

In the example above, we want the addition to be performed before the multiplication, so we wrap the addition in parentheses.

(5 + 3) = 8
8 * 2 = 16

Summary: Points to remember

• Operators are symbols that have a special meaning to the compiler.
• Sass supports the typical arithmetic, assignment, comparison (relational) and logical (conditional) operators.
• Sass also supports the negation and concatenation operators but not the ternary operator or at-rule.
• Some operators have greater importance than others and we change operator precedence with parentheses.