Ajouter correctement l'unité au numéro - Astuces CSS

Anonim

Lors de la conversion d'un nombre sans unité en longueur, durée, angle ou autre, les gens ont tendance à simplement ajouter l'unité sous forme de chaîne, comme ceci:

$value: 42; $length: $value + px; // 42px

Bien que cette méthode fonctionne, elle est loin d'être idéale car elle aboutit à convertir implicitement la valeur initiale sous forme de chaîne. En effet, si vous essayez de faire des maths avec la $lengthvaleur à partir de maintenant, vous verrez que Sass lève rapidement une erreur car il ne peut pas faire d'opérateurs mathématiques avec une chaîne.

Pour contourner ce problème, il existe deux façons de procéder correctement:

$value: 42; $length: $value + 0px; // 42px
$value: 42; $length: $value * 1px; // 42px

Chacune de ces méthodes produira correctement un nombre comme prévu et non une chaîne.