Boucle @while SCSS : multiplication par 1px nécessaire ou non ?

Question

J'ai créé ce code et j'obtiens le même résultat sans faire de * 1px :
@while $font-sizing
Est-ce utilisable ou est-ce que ce code serait problématique dans le temps ?

Louis-Nicolas Leuillet · Accepted Answer

Alors oui, ton code fonctionne très bien ! L'interpolation avec #{$font-sizing}px concatène simplement la valeur numérique avec la chaîne "px", et visuellement le CSS généré sera identique.
La différence est subtile mais elle existe : avec $font-sizing * 1px , tu obtiens une vraie valeur SCSS de type "nombre avec unité" (par exemple 12px en tant que valeur numérique), alors qu'avec #{$font-sizing}px , tu fais de la concaténation de chaînes.
Dans le cadre de cet exercice ça ne pose aucun problème puisque la valeur est directement utilisée dans font-size et qu'on ne fait pas de calcul dessus après.
Par contre, si tu devais ensuite réutiliser cette valeur dans une opération mathématique (genre diviser par 2, ou l'additionner à une autre valeur avec unité), la version interpolée que tu proposes pourrait poser souci car SCSS la traiterait comme une chaîne et non comme un nombre (bah oui, y'a "px").
Du coup, pour cet exercice précis, ta solution est tout à fait valide. Mais c'est bien de garder en tête que la multiplication par 1px est une approche plus "propre" au sens SCSS, car elle conserve le numérique. C'est une bonne pratique à adopter si tu veux que tes variables restent manipulables par la suite.

Alexis Rintjema · Answer

Ok, compris c'est clair 🙂

Boucle @while SCSS : multiplication par 1px nécessaire ou non ?

Codez dans vos feuilles de style grâce à SASS et SCSS