Iako je vrlo koristan u računanju, Sass pomalo nedostaje s matematičkim pomoćnim funkcijama. Otvoreno je izdanje službenog spremišta za traženje dodatnih funkcija povezanih s matematikom gotovo 3 godine.
Neki nezavisni dobavljači poput Compass ili SassyMath pružaju naprednu podršku za matematičke značajke, ali to su vanjske ovisnosti koje bi se moglo (trebalo?) Izbjeći.
Jedan od najpopularnijih zahtjeva po tom pitanju je funkcija snage ili čak eksponentni operator. Nažalost, u Sassu još uvijek nema podrške za to, a iako je još uvijek u aktivnoj raspravi, malo je vjerojatno da će se to dogoditi vrlo brzo.
U međuvremenu, mogućnost podizanja broja do određene mjere vrlo je korisno u CSS-u. Evo nekoliko primjera gdje bi vam dobro došao:
- za određivanje osvjetljenosti boje;
- za fiksiranje broja na određenu količinu znamenki;
- napraviti neku (inverznu) trigonometriju ...
Sass implementacija
Na našu sreću, moguće je (i sasvim jednostavno) stvoriti funkciju napajanja s ničim osim sa Sassom. Sve što nam treba je petlja i neki osnovni matematički operatori (poput *i /).
Pozitivni cjelobrojni eksponenti
Naša funkcija (imenovana pow) u najmanjem obliku izgledala bi ovako:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Evo primjera:
.foo ( width: pow(20, 2) * 1px; // 400px )Pozitivni ili negativni cjelobrojni eksponenti
Međutim, radi samo s pozitivnim argumentom `$ power`. Dopustiti negativne eksponente ne bi bilo tako teško, samo trebamo mali dodatni uvjet:
@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; )Evo primjera:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Pozitivni ili negativni eksponenti
Sad, što ako želimo necjelobrojne eksponente? Kao 4.2na primjer? Istina je da doista nije lako. To je još uvijek izvedivo, ali zahtijeva više od samo petlje i nekoliko operacija.
To je učinjeno na spremištu Bourbon kako bi se modular-scale(… )funkcija dovršila iz okvira (iako je odbijena). Evo 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; )Daljnja razmatranja
Pa, to je bilo intenzivno. Ako vam zatreba podrška za necjelobrojne eksponente (poput 4.2), preporučujem da upotrijebite vanjsku ovisnost koja je pruža (poput sass-math-pow) umjesto da sav ovaj kôd uključite u svoj projekt. Nije da je to loše samo po sebi, ali zapravo nije uloga vašeg projekta da ugosti tako veliku masu neautorskog koda za poliranje (zato imamo upravitelje paketa).
Također imajte na umu da su sve ove operacije prilično intenzivne za tako tanak sloj kao što je Sass. U ovom trenutku, i ako se vaš dizajn oslanja na napredne matematičke funkcije, vjerojatno je bolje implementaciju ovih pomagača prenijeti s gornjeg sloja (Node.js, Ruby, itd.) Na Sass kroz sustav dodataka (Eyeglass, Ruby dragulj itd.).
Ali za osnovnu pow(… )upotrebu ne mogu preporučiti dovoljno jednostavne verzije!