Bien que très utile avec l'arithmétique, Sass est un peu court avec les fonctions d'aide mathématiques. Il y a eu un problème ouvert sur le référentiel officiel pour demander plus de fonctions liées aux mathématiques depuis près de 3 ans.
Certains fournisseurs tiers comme Compass ou SassyMath fournissent un support avancé pour les fonctionnalités mathématiques, mais ce sont des dépendances externes qui pourraient (devraient?) Être évitées.
L'une des demandes les plus populaires à ce sujet est une fonction de puissance ou même un opérateur d'exposant. Malheureusement, il n'y a toujours pas de support pour cela dans Sass et bien qu'il soit toujours en discussion active, il est peu probable que cela se produise très bientôt.
En attendant, être capable d'élever un nombre à une certaine puissance s'avère très utile en CSS. Voici quelques exemples où cela serait utile:
- pour déterminer la luminance d'une couleur;
- pour fixer un nombre à un certain nombre de chiffres;
- faire de la trigonométrie (inverse)…
Implémentation Sass
Heureusement pour nous, il est possible (et assez simple) de créer une fonction power avec rien d'autre que Sass. Tout ce dont nous avons besoin est une boucle et quelques opérateurs mathématiques de base (tels que *et /).
Exposants entiers positifs
Notre fonction (nommée pow) dans sa plus petite forme ressemblerait à ceci:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Voici un exemple:
.foo ( width: pow(20, 2) * 1px; // 400px )Exposants entiers positifs ou négatifs
Cependant, cela ne fonctionne qu'avec un argument positif `$ power`. Autoriser les exposants négatifs ne serait pas si difficile, nous avons juste besoin d'une petite condition supplémentaire:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent < 0 ( @for $i from 1 through -$exponent ( $value: $value / $number; ) ) @return $value; )Voici un exemple:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Exposants positifs ou négatifs
Maintenant, que faire si nous voulons des exposants non entiers? Comme 4.2par exemple? La vérité est que ce n'est vraiment pas facile. C'est toujours faisable, mais cela nécessite plus qu'une simple boucle et quelques opérations.
Cela a été fait sur le référentiel Bourbon afin de compléter la modular-scale(… )fonction à partir du framework (bien que cela ait été refusé). Voici le code:
@function pow($number, $exponent) ( @if (round($exponent) != $exponent) ( @return exp($exponent * ln($number)); ) $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent pow(10, $ten-exp)) ( $ten-exp: $ten-exp + 1; ) @return summation(ln-maclaurin, $value / pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten; )Autres considérations
Eh bien, c'était intense. Si vous avez besoin de la prise en charge d'exposants non entiers (comme 4.2), je vous recommande d'utiliser une dépendance externe qui le fournit (comme sass-math-pow) au lieu d'inclure tout ce code dans votre projet. Non pas que ce soit une mauvaise chose en soi, mais ce n'est pas vraiment le rôle de votre projet d'héberger une si grande quantité de code de polyfilling non créé (c'est pourquoi nous avons des gestionnaires de paquets).
Notez également que toutes ces opérations sont assez intensives pour une couche aussi mince que Sass. À ce stade, et si votre conception repose sur des fonctions mathématiques avancées, il est probablement préférable de transmettre l'implémentation de ces helpers de la couche supérieure (Node.js, Ruby, etc.) à Sass via un système de plugins (Eyeglass, Ruby gemme, etc.).
Mais pour une pow(… )utilisation basique , je ne saurais trop recommander les versions simples!