Nous pouvons effectuer des calculs mathématiques sur les nombres. Sass prend en charge toutes les opérations arithmétiques de base comme l'addition (+), la soustraction (-), la multiplication (*) et la division (/).

width: 100px + 10px; /* 110px */
height: 100% - 20%; /* 80% */

Pour l'addition et la soustraction, il est important d'avoir des valeurs avec les mêmes unités (par exemple, %, px).

animation-duration: 200ms * 3; /* 600ms */
flex-basis: 100% / 4; /* 25% */

Pour la multiplication et la division, il est crucial d'avoir une valeur sans unité. Sass ne peut pas calculer la division de pixels ou de pourcentages.

Opérations mathématiques avec des variables

Nous pouvons facilement inclure des variables dans les calculs si la variable a une valeur valide.

Imaginons que nous devons ajouter une double marge à l'élément :

$defaultMargin: 30px;

.item {
  margin: $defaultMargin * 2; /* Result is 60px */
}