Sass Operators

A brief introduction to Sass operators. Includes addition, subtraction, division, equality operators, and more.

Sass supports a number of operators that can help you perform operations within your Sass files.

Equality Operators

All data types support the following equality operators :

`==`	Equal to
`!=`	Not equal to

In addition to the equality operators, each data type supports its own set of operators.

Number Operators

SassScript supports the following standard arithmetic operators:

`+`	Addition
`-`	Subtraction
`*`	Multiplication
`/`	Division
`%`	Modulo

A common use of arithmetic operators is to have Sass calculate width percentages.

For example, you can specify element widths in pixels, then let Sass calculate them as percentages, so that the compiled CSS specifies them as a percentage.

This results in the following CSS being compiled:

Sass preserves units when working with these operators. So you can't add numbers with different units (e.g. one is in px and the other is in em) for example.

Color Operations

The arithmetic operators also work on colors. The operators are applied to each of the red, green, and blue components, respectively, rather than to the whole six-digit value.

So when adding two hex values together for example, it will add each pair of digits in turn. So it will add the first pair of digits, the second pair, and the third pair as separate additions.

Like this:

This results in the following CSS being compiled:

You can also apply operators to colors and numbers. For example

This results in the following CSS being compiled:

Strings

The + operator can also be used to concatenate strings.

Here's an example:

This results in the following CSS being compiled:

Boolean Operators

SassScript also supports the and, or, and not boolean operators for boolean values.