Čeprav je Sass zelo koristen pri računanju, mu matematične pomožne funkcije nekoliko manjkajo. V uradnem repozitoriju je že skoraj tri leta odprta številka, v kateri se zahteva več funkcij, povezanih z matematiko.
Nekateri neodvisni ponudniki, kot sta Compass ali SassyMath, nudijo napredno podporo za matematične funkcije, vendar gre za zunanje odvisnosti, ki bi se jim lahko (treba?) Izogniti.
Ena izmed najbolj priljubljenih zahtev v zvezi s tem je funkcija napajanja ali celo eksponentni operater. Na žalost v Sassu še vedno ni podpore in čeprav je še vedno v aktivni razpravi, se to verjetno ne bo zgodilo kmalu.
Medtem pa je v CSS zelo koristno, da dvignemo številko na določeno stopnjo. Tu je nekaj primerov, ko bi vam prišel prav:
- za določanje svetilnosti barve;
- za določitev števila na določeno število števk;
- narediti nekaj (inverzne) trigonometrije ...
Izvajanje Sass
Na našo srečo je mogoče (in povsem preprosto) ustvariti funkcijo napajanja samo s Sassom. Vse, kar potrebujemo, je zanka in nekateri osnovni matematični operaterji (na primer *in /).
Pozitivni eksponenti celega števila
Naša funkcija (imenovana pow) v najmanjši obliki bi izgledala takole:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Tu je primer:
.foo ( width: pow(20, 2) * 1px; // 400px )Pozitivni ali negativni eksponenti celega števila
Vendar deluje le s pozitivnim argumentom `$ power`. Dovoliti negativne eksponente ne bi bilo tako težko, potrebujemo le majhen dodaten pogoj:
@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; )Tu je primer:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Pozitivni ali negativni eksponenti
Kaj pa, če želimo eksponente, ki niso celoštevilski? Kot 4.2na primer? Resnica je, da res ni lahko. Še vedno je izvedljivo, vendar zahteva več kot le zanko in nekaj operacij.
To je bilo narejeno v repozitoriju Bourbon, da bi modular-scale(… )funkcija dokončala iz okvira (čeprav je bila zavrnjena). Tu je koda:
@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; )Nadaljnji premisleki
No, to je bilo intenzivno. Če slučajno potrebujete podporo za eksponente, ki niso celoštevilčni (na primer 4.2), priporočam, da uporabite zunanjo odvisnost, ki jo zagotavlja (na primer sass-math-pow), namesto da v projekt vključite vso to kodo. Saj sicer ni slabo, ampak v resnici ni vloga vašega projekta, da gosti tako velik nabor neavtorske kode za polnjenje (zato imamo upravitelje paketov).
Upoštevajte tudi, da so vse te operacije za tako tanko plast, kot je Sass, precej intenzivne. Na tej točki in če se vaša zasnova opira na napredne matematične funkcije, je verjetno bolje, da izvedbo teh pomočnikov prenesete z zgornje plasti (Node.js, Ruby itd.) Na Sass prek sistema vtičnikov (Eyeglass, Ruby dragulj itd.).
Toda za osnovno pow(… )uporabo preprostih različic ne morem priporočiti dovolj!