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.
Similar to assigning CSS values to properties, we use the : operator to define variables within SASS.
$defaultFontSize: 12px;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;
}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;
}