20th January 2017

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;
}
```