Vaikka Sass on erittäin hyödyllinen aritmeettisessa käytössä, matemaattisten auttajatoimintojen kanssa se jää hieman alle. Virallisessa arkistossa on ollut avoin kysymys matematiikkaan liittyvien toimintojen lisäämisestä melkein 3 vuoden ajan.
Jotkut kolmannen osapuolen toimittajat, kuten Compass tai SassyMath, tarjoavat matematiikkaominaisuuksille edistynyttä tukea, mutta ne ovat ulkoisia riippuvuuksia, joita voitaisiin (pitäisi?) Välttää.
Yksi suosituimmista pyynnöistä tässä asiassa on tehofunktio tai jopa eksponenttioperaattori. Valitettavasti Sassilla ei ole vieläkään tukea tälle, ja vaikka siitä käydään edelleen aktiivista keskustelua, se ei todennäköisesti tapahdu kovin pian.
Samaan aikaan se, että pystyt nostamaan numeron tiettyyn tehoon, sattuu olemaan erittäin hyödyllistä CSS: ssä. Tässä on muutama esimerkki, josta se olisi hyödyllistä:
- värin kirkkauden määrittämiseksi;
- korjata numero tiettyyn määrään numeroita;
- tehdä (käänteistä) trigonometriaa…
Sass-toteutus
Onneksi meille on mahdollista (ja melko yksinkertainen) luoda tehofunktio vain Sassin kanssa. Tarvitsemme vain silmukan ja joitain matemaattisia perusoperaattoreita (kuten *ja /).
Positiiviset kokonaislukueksponentit
Funktiomme (nimetty pow) pienimmässä muodossaan näyttäisi tältä:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Tässä on esimerkki:
.foo ( width: pow(20, 2) * 1px; // 400px )Positiiviset tai negatiiviset kokonaislukueksponentit
Se toimii kuitenkin vain positiivisen $ power-argumentin kanssa. Negatiivisten eksponenttien salliminen ei olisi niin vaikeaa, tarvitsemme vain pienen lisäehdon:
@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; )Tässä on esimerkki:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Positiiviset tai negatiiviset eksponentit
Entä jos haluamme ei-kokonaislukueksponentteja? Kuten 4.2esimerkiksi? Totuus on, että se ei todellakaan ole helppoa. Se on silti toteutettavissa, mutta se vaatii muutakin kuin vain silmukan ja muutaman operaation.
Tämä on tehty Bourbon-arkistossa modular-scale(… )toiminnon täydentämiseksi kehyksestä (vaikka se on hylätty). Tässä on koodi:
@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; )Muita huomioita
No, se oli voimakasta. Jos tarvitset tukea ei-kokonaislukueksponentteille (kuten 4.2), suosittelen, että käytät ulkoista riippuvuutta, joka tarjoaa sen (kuten sass-math-pow) sen sijaan, että sisällytät tämän koodin projektiisi. Ei siksi, että se on sinänsä huono asia, mutta projektisi ei todellakaan ole isännöidä niin suurta joukkoa kirjoittamatonta polyfilling-koodia (siksi meillä on pakettien hallinta).
Huomaa myös, että kaikki nämä toimet ovat melko intensiivisiä niin ohuelle kerrokselle kuin Sass. Tässä vaiheessa, ja jos suunnittelusi perustuu edistyneisiin matemaattisiin toimintoihin, on todennäköisesti parempi siirtää näiden avustajien toteutus ylemmältä kerrokselta (Node.js, Ruby jne.) Alas Sassille laajennusjärjestelmän kautta (Silmälasit, Ruby helmi jne.).
Mutta peruskäyttöön pow(… )en voi suositella yksinkertaisia versioita tarpeeksi!