În timp ce este foarte util în aritmetică, Sass rămâne puțin scurt cu funcțiile de asistență matematică. A existat o problemă deschisă în depozitul oficial pentru a solicita mai multe funcții legate de matematică timp de aproape 3 ani.
Unii furnizori terți, precum Compass sau SassyMath, oferă suport avansat pentru funcțiile matematice, dar sunt dependențe externe care ar putea (ar trebui?) Să fie evitate.
Una dintre cele mai populare cereri în această privință este o funcție de alimentare sau chiar un operator exponent. Din păcate, nu există încă niciun sprijin pentru acest lucru în Sass și, deși este încă în discuție activă, este puțin probabil să se întâmple foarte curând.
Între timp, posibilitatea de a crește un număr la o anumită putere se întâmplă să fie foarte utilă în CSS. Iată câteva exemple în care ar fi util:
- pentru a determina luminozitatea unei culori;
- pentru a fixa un număr la o anumită cantitate de cifre;
- a face niște trigonometrie (inversă) ...
Implementarea Sass
Din fericire pentru noi, este posibil (și destul de simplu) să creăm o funcție de putere cu nimic altceva decât Sass. Tot ce avem nevoie este o buclă și câțiva operatori matematici de bază (cum ar fi *și /).
Exponenți întregi pozitivi
Funcția noastră (denumită pow) în forma sa cea mai mică ar arăta astfel:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Iată un exemplu:
.foo ( width: pow(20, 2) * 1px; // 400px )Exponenți întregi pozitivi sau negativi
Cu toate acestea, funcționează numai cu un argument pozitiv „$ power”. Permiterea exponenților negativi nu ar fi atât de grea, avem nevoie doar de o mică condiție suplimentară:
@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; )Iată un exemplu:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Exponenți pozitivi sau negativi
Acum, ce se întâmplă dacă vrem exponenți non-întregi? Cum ar fi 4.2de exemplu? Adevărul este că într-adevăr nu este ușor. Este încă posibil, dar necesită mai mult decât o buclă și câteva operații.
Acest lucru a fost făcut pe depozitul Bourbon pentru a finaliza modular-scale(… )funcția din cadrul (deși a fost refuzat). Iată codul:
@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; )Considerații suplimentare
Ei bine, a fost intens. Dacă aveți nevoie de suport pentru exponenți care nu sunt întregi (cum ar fi 4.2), vă recomand să utilizați o dependență externă care o oferă (cum ar fi sass-math-pow) în loc să includeți tot acest cod în proiectul dvs. Nu că este un lucru rău în sine, dar nu este cu adevărat rolul proiectului dvs. să găzduiți o montură atât de mare de coduri de umplere neautorizate (de aceea avem manageri de pachete).
De asemenea, rețineți că toate aceste operațiuni sunt destul de intensive pentru un strat atât de subțire ca Sass. În acest moment și dacă proiectarea dvs. se bazează pe funcții matematice avansate, este mai bine să treceți implementarea acestor ajutoare din stratul superior (Node.js, Ruby etc.) până la Sass printr-un sistem plugin (Eyeglass, Ruby bijuterie etc.).
Dar pentru pow(… )utilizarea de bază , nu pot recomanda suficient versiunile simple!