# Operators

Sass supports a handful of useful `operators` for working with different values. These include the standard mathematical operators like `+` and `*`, as well as operators for various other types:

Early on in Sass’s history, it added support for mathematical operations on colors. These operations operated on each of the colors’ RGB channels separately, so adding two colors would produce a color with the sum of their red channels as its red channel and so on.

This behavior wasn’t very useful, since it channel-by-channel RGB arithmetic didn’t correspond well to how humans perceive color. Color functions were added which are much more useful, and color operations were deprecated. They’re still supported in LibSass and Ruby Sass, but they’ll produce warnings and users are strongly encouraged to avoid them.

## Order of Operations permalinkOrder of Operations

Sass has a pretty standard order of operations, from tightest to loosest:

1. The unary operators `not`, `+`, `-`, and `/`.
2. The `*`, `/`, and `%` operators.
3. The `+` and `-` operators.
4. The `>`, `>=`, `<` and `<=` operators.
5. The `==` and `!=` operators.
6. The `and` operator.
7. The `or` operator.
8. The `=` operator, when it’s available.

### SCSS Syntax

``````@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true
``````

### Sass Syntax

``````@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true
``````

You can explicitly control the order of operations using parentheses. An operation inside parentheses is always evaluated before any operations outside of them. Parentheses can even be nested, in which case the innermost parentheses will be evaluated first.

### SCSS Syntax

``````@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
``````

### Sass Syntax

``````@debug (1 + 2) * 3  // 9
@debug ((1 + 2) * 3 + 4) * 5  // 65
``````

Sass supports a special `=` operator that’s only allowed in function arguments, which just creates an unquoted string with its two operands separated by `=`. This exists for backwards-compatibility with very old IE-only syntax.

### SCSS Syntax

``````.transparent-blue {
filter: chroma(color=#0000ff);
}
``````

### Sass Syntax

``````.transparent-blue
filter: chroma(color=#0000ff)

``````

### CSS Output

``````.transparent-blue {
filter: chroma(color=#0000ff);
}
``````