# SASS Operators

SASS introduces mathematics to help you write your CSS. Here we take a look at some of the different types of SASS operators and how they can be used in your project.

## Assignment Operator

Similar to assigning CSS values to properties, we use the `:` operator to define variables within SASS.

``\$defaultFontSize: 12px;``

## Arithmetic Operators

The arithmetic operators that SASS supports are:

• +
• *
• /
• %

We can use these operators to perform basic calculations, such as defining widths.

``````.container {
width: 992px / 1200px * 100;
}``````

It’s worth noting that if trying to add together two different units, such as `px` and `em`, you will produce invalid CSS.

``````.heading {
font-size: 5px + 2em; // Invalid
}``````

Also note that the `+` operator can also be used for concatenation.

``````.heading {
font: Arial + " sans-serif";
}``````

Multiplying two values of the same units will also invalidate the CSS.

``````.heading {
font-size: 5px * 2px; // Invalid
}``````

However you can do the following.

``````.heading {
font-size: 5px * 2;
}``````

## Colour Operations

All arithmetic operations are supported for colour values. For example, we can add two hex colours to equal a new hex value.

``````p {
color: #010203 + #040506;
}``````

The mathematics behind this operation is that the addition operator adds the first 01 + 04 to make 05, 02 + 05 = 07, and 03 + 06 = 09, and is compiled to `#050709;`.

``````p {
color: #050709;
}``````