Nors Sassas labai naudingas aritmetikai, Sass šiek tiek nesiekia matematinių pagalbininkų funkcijų. Oficialioje saugykloje jau beveik 3 metus buvo prašoma daugiau su matematika susijusių funkcijų.
Kai kurie trečiųjų šalių pardavėjai, pvz., „Compass“ ar „SassyMath“, teikia pažangią paramą matematikos funkcijoms, tačiau tai yra išorinės priklausomybės, kurios (reikėtų?) Išvengti.
Vienas iš populiariausių prašymų šiuo klausimu yra galios funkcija ar net rodiklio operatorius. Deja, „Sass“ vis dar tam nepalaiko ir, nors vis dar aktyviai diskutuojama, vargu ar tai įvyks labai greitai.
Tuo tarpu galimybė padidinti skaičių iki tam tikros galios būna labai naudinga CSS. Štai keli pavyzdžiai, kai tai būtų naudinga:
- nustatyti spalvos ryškumą;
- nustatyti skaičių iki tam tikro skaičiaus skaitmenų;
- atlikti tam tikrą (atvirkštinę) trigonometriją ...
Sass įgyvendinimas
Mūsų laimei, įmanoma (ir gana paprasta) sukurti galios funkciją be nieko, išskyrus Sassą. Viskas, ko mums reikia, yra kilpa ir kai kurie pagrindiniai matematiniai operatoriai (pvz., *Ir /).
Teigiami sveikojo skaičiaus rodikliai
Mūsų funkcija (pavadinta pow) mažiausia forma atrodytų taip:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Štai pavyzdys:
.foo ( width: pow(20, 2) * 1px; // 400px )Teigiami arba neigiami sveikojo skaičiaus rodikliai
Tačiau jis veikia tik esant teigiamam „$ power“ argumentui. Leisti neigiamus rodiklius nebūtų taip sunku, mums reikia tik nedidelės papildomos sąlygos:
@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; )Štai pavyzdys:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Teigiami arba neigiami rodikliai
Ką daryti, jei norime ne sveikojo skaičiaus rodiklių? Pavyzdžiui, 4.2pavyzdžiui? Tiesa ta, kad tai tikrai nėra lengva. Tai vis dar įmanoma, tačiau tam reikia daugiau nei tik ciklo ir kelių operacijų.
Tai buvo padaryta „Bourbon“ saugykloje, norint užbaigti modular-scale(… )funkciją iš sistemos (nors ir atmesta). Štai kodas:
@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; )Kiti svarstymai
Na, tai buvo intensyvu. Jei jums reikia palaikymo ne sveikojo laipsnio rodikliams (pvz. 4.2, Rekomenduoju), užuot įtraukę visą šį kodą į savo projektą, naudokite išorinę priklausomybę, kuri ją teikia (pvz., „Sass-math-pow“). Ne todėl, kad tai savaime yra blogas dalykas, tačiau iš tikrųjų jūsų projektas nėra toks didelis, kad būtų galima surengti tokį didelį autorių neturinčio užpildymo kodo rinkinį (todėl turime paketų tvarkytuvus).
Taip pat atkreipkite dėmesį, kad visos šios operacijos yra gana intensyvios tokiam plonam sluoksniui kaip „Sass“. Šiuo metu, ir jei jūsų dizainas remiasi pažangiomis matematinėmis funkcijomis, tikriausiai geriau perduoti šių pagalbininkų įgyvendinimą nuo viršutinio sluoksnio (Node.js, Ruby ir kt.) Iki Sass per įskiepių sistemą (Eyeglass, Ruby brangakmenis ir kt.).
Tačiau paprastam pow(… )naudojimui negaliu pakankamai rekomenduoti!