Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Effectuer des Calculs avec les Opérateurs Numériques Sass | Préprocesseurs CSS et Sass
Techniques CSS Avancées

bookEffectuer des Calculs avec les Opérateurs Numériques Sass

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 */
}
question mark

Sélectionnez l’énoncé correct.

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 7. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.04

bookEffectuer des Calculs avec les Opérateurs Numériques Sass

Glissez pour afficher le menu

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 */
}
question mark

Sélectionnez l’énoncé correct.

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 7. Chapitre 4
some-alt