Effectuer 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 */
}
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
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
Effectuer 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 */
}
Merci pour vos commentaires !