Nous pouvons effectuer des calculs mathématiques sur des nombres. Sass prend en charge toutes les opérations arithmétiques de base telles que 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’utiliser 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 essentiel d’avoir une valeur sans unité. Sass ne peut pas effectuer 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 possède une valeur valide.

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

$defaultMargin: 30px;

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