Hoewel Sass erg behulpzaam is met rekenen, schiet hij een beetje tekort met wiskundige hulpfuncties. Er is al bijna 3 jaar een openstaand probleem in de officiële repository om om meer wiskundige functies te vragen.
Sommige externe leveranciers, zoals Compass of SassyMath, bieden geavanceerde ondersteuning voor wiskundige functies, maar het zijn externe afhankelijkheden die kunnen (moeten?) Worden vermeden.
Een van de meest populaire verzoeken in deze kwestie is een machtsfunctie of zelfs een exponentoperator. Helaas is er nog steeds geen ondersteuning voor in Sass en hoewel het nog steeds actief is, is het onwaarschijnlijk dat dit zeer snel zal gebeuren.
Ondertussen is het erg handig om een getal tot een bepaald vermogen te verhogen in CSS. Hier zijn een paar voorbeelden waar het van pas zou kunnen komen:
- om de luminantie van een kleur te bepalen;
- om een nummer op een bepaald aantal cijfers vast te leggen;
- om wat (inverse) trigonometrie te doen ...
Sass implementatie
Gelukkig voor ons is het mogelijk (en vrij eenvoudig) om een powerfunctie te creëren met alleen Sass. Het enige wat we nodig hebben is een lus en enkele elementaire wiskundige operatoren (zoals *en /).
Positieve gehele exponenten
Onze functie (met de naam pow) in zijn kleinste vorm zou er als volgt uitzien:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Hier is een voorbeeld:
.foo ( width: pow(20, 2) * 1px; // 400px )Positieve of negatieve gehele exponenten
Het werkt echter alleen met een positief '$ power'-argument. Negatieve exponenten toestaan zou niet zo moeilijk zijn, we hebben alleen een kleine extra voorwaarde nodig:
@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; )Hier is een voorbeeld:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Positieve of negatieve exponenten
Nu, wat als we niet-gehele exponenten willen? Zoals 4.2bijvoorbeeld? De waarheid is dat het echt niet gemakkelijk is. Het is nog steeds goed te doen, maar het vereist meer dan alleen een lus en een paar bewerkingen.
Dit is gedaan op de Bourbon-repository om de modular-scale(… )functie vanuit het framework te voltooien (hoewel dit is geweigerd). Hier is de 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; )Verdere overwegingen
Nou, dat was intens. Als je ondersteuning nodig hebt voor exponenten zonder gehele getallen (zoals 4.2), raad ik je aan om een externe afhankelijkheid te gebruiken die deze voorziet (zoals sass-math-pow) in plaats van al deze code in je project op te nemen. Niet dat het per se een slechte zaak is, maar het is niet echt de rol van uw project om zo'n grote hoeveelheid niet-geschreven polyfilling-code te hosten (daarom hebben we pakketbeheerders).
Merk ook op dat al deze bewerkingen behoorlijk intensief zijn voor zo'n dunne laag als Sass. Op dit punt, en als uw ontwerp afhankelijk is van geavanceerde wiskundige functies, is het waarschijnlijk beter om de implementatie van deze helpers door te geven van de bovenste laag (Node.js, Ruby, enz.) Naar Sass via een plug-insysteem (Eyeglass, Ruby edelsteen, etc.).
Maar voor basisgebruik pow(… )kan ik de eenvoudige versies niet genoeg aanbevelen!