Opérateurs Numériques Sass

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 (/).

css
Copier le code
9
1
2
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).

css
Copier le code
9
1
2
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 :

css
Copier le code
9
1
2
3
4
5
$defaultMargin: 30px;

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