Selvom det er meget nyttigt med aritmetik, falder Sass lidt under med matematiske hjælperfunktioner. Der har været et åbent emne på det officielle lager for at bede om flere matematiske relaterede funktioner i næsten 3 år.
Nogle tredjepartsleverandører som Compass eller SassyMath yder avanceret support til matematiske funktioner, men de er eksterne afhængigheder, som man kunne (skulle?) Undgå.
En af de mest populære anmodninger i denne sag er en strømfunktion eller endda en eksponentoperatør. Desværre er der stadig ingen støtte til dette i Sass, og mens det stadig er under aktiv diskussion, er det usandsynligt, at det sker meget snart.
I mellemtiden er det meget nyttigt at være i stand til at hæve et nummer til en bestemt magt i CSS. Her er et par eksempler, hvor det ville være nyttigt:
- at bestemme luminansen for en farve;
- at rette et tal til et bestemt antal cifre;
- at lave noget (omvendt) trigonometri ...
Sass implementering
Heldigvis for os er det muligt (og ret simpelt) at oprette en strømfunktion med intet andet end Sass. Alt, hvad vi har brug for, er en sløjfe og nogle grundlæggende matematiske operatorer (såsom *og /).
Positive heltal eksponenter
Vores funktion (navngivet pow) i sin mindste form ville se sådan ud:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Her er et eksempel:
.foo ( width: pow(20, 2) * 1px; // 400px )Positive eller negative heltalsexponenter
Det fungerer dog kun med et positivt '$ power'-argument. At tillade negative eksponenter ville ikke være så svært, vi har bare brug for en lille ekstra betingelse:
@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; )Her er et eksempel:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Positive eller negative eksponenter
Hvad nu, hvis vi vil have ikke-heltal eksponenter? Såsom 4.2for eksempel? Sandheden er, at det virkelig ikke er let. Det er stadig gennemførligt, men det kræver mere end bare en sløjfe og et par operationer.
Dette er gjort på Bourbon-arkivet for at fuldføre modular-scale(… )funktionen fra rammen (selvom den er blevet afvist). Her er koden:
@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; )Yderligere overvejelser
Nå, det var intenst. Hvis du tilfældigvis har brug for support til ikke-heltal eksponenter (som 4.2), anbefaler jeg, at du bruger en ekstern afhængighed, der giver den (såsom sass-math-pow) i stedet for at medtage al denne kode i dit projekt. Ikke at det i sig selv er en dårlig ting, men det er ikke rigtig dit projekts rolle at være vært for en så stor montering af ikke-autoriseret polyfilling-kode (det er derfor, vi har pakkehåndtering).
Bemærk også, at alle disse operationer er ret intensive for et så tyndt lag som Sass. På dette tidspunkt, og hvis dit design er afhængig af avancerede matematiske funktioner, er det sandsynligvis bedre at videregive implementeringen af disse hjælpere fra det øverste lag (Node.js, Ruby osv.) Ned til Sass gennem et pluginsystem (Eyeglass, Ruby perle osv.).
Men til grundlæggende pow(… )brug kan jeg ikke anbefale de enkle versioner nok!