Sass/SCSS Operators Tutorial

In this Sass/SCSS tutorial we learn about special symbols that allow us to perform arithmetic, assignment, comparison and logical operations.

We also cover the negation, concatenation and ternary operators, as well as general operator precedence.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

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.

OperatorDescriptionExample
+Adds operands5 + 3 = 8
-Subtract the second operand from the first5 - 3 = 2
*Multiplies the first operand with the second5 * 3 = 15
/Divide the first operand with the second5 / 3 = 1
%Modulus. Returns the remainder of a division5 % 3 = 2

Assignment operators

Sass supports the following assignment operators.

OperatorDescriptionExample
:Assignment. Assign right operand to the left operand$num: 10;

Comparison (relational) operators

Sass supports the following comparison operators.

OperatorDescription
==Evaluates if the values of two operands are equal
!=Evaluates if the values of two operands are not equal
>Evaluates if the value of the left operand is greater than the value of the right operand
<Evaluates if the value of the left operand is less than the value of the right operand
>=Evaluates if the value of the left operand is greater than or equal to the value of the right operand
<=Evaluates if the value of the left operand is less than or equal to the value of the right operand

Logical (conditional) operators

Sass supports the following comparison keywords as operators.

KeywordNameDescription
andConditional AND operatorIf both operands are non-zero, the result is true
orConditional OR operatorIf one of the two operands is non-zero, the result is true
notConditional NOT operatorIf the condition is not true, the result becomes true

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.

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

p {
  margin-left: #{$negative}px;
}
Output: Compiled CSS
p {
  margin-left: -1px;
}

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

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

p {
  margin-left: #{$negative}px;
}
Output: Compiled CSS
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.

Example:
$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.

Output: Compiled CSS
@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.

Example:
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.

Example:
// 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.

Example:
(5 + 3) * 2

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

Example:
(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.