Kaut arī ļoti noderīgs aritmētikā, Sass nedaudz atpaliek no matemātisko palīgu funkcijām. Oficiālajā krātuvē ir bijis atvērts jautājums, kurā gandrīz 3 gadus tiek prasīts vairāk ar matemātiku saistītu funkciju.
Daži trešo pušu pārdevēji, piemēram, Compass vai SassyMath, nodrošina uzlabotu atbalstu matemātikas funkcijām, taču tās ir ārējas atkarības, no kurām varētu (vajadzētu?) Izvairīties.
Viens no populārākajiem pieprasījumiem šajā jautājumā ir jaudas funkcija vai pat eksponentu operators. Diemžēl Sass joprojām to neatbalsta, un, lai gan tas joprojām tiek aktīvi apspriests, maz ticams, ka tas notiks ļoti drīz.
Tikmēr iespēja paaugstināt skaitli līdz noteiktai pakāpei CSS ir ļoti noderīga. Šeit ir daži piemēri, kur tas noderētu:
- noteikt krāsas spilgtumu;
- noteikt skaitli noteiktam ciparu skaitam;
- veikt kādu (apgriezto) trigonometriju…
Sass ieviešana
Par laimi mums ir iespējams (un diezgan vienkārši) izveidot jaudas funkciju bez Sass. Viss, kas mums nepieciešams, ir cilpa un daži pamata matemātiskie operatori (piemēram, *un /).
Pozitīvi vesela skaitļa eksponenti
Mūsu funkcija (nosaukta pow) mazākajā formā izskatās šādi:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Šeit ir piemērs:
.foo ( width: pow(20, 2) * 1px; // 400px )Pozitīvi vai negatīvi veseli skaitļi
Tomēr tas darbojas tikai ar pozitīvu argumentu $ $. Atļaut negatīvos eksponentus nebūtu tik grūti, mums vajag tikai nelielu papildu nosacījumu:
@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; )Šeit ir piemērs:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Pozitīvi vai negatīvi eksponenti
Ko darīt, ja mēs vēlamies, lai eksponenti nebūtu veseli skaitļi? Piemēram, 4.2piemēram? Patiesība ir tāda, ka tas tiešām nav viegli. Tas joprojām ir izpildāms, taču tas prasa vairāk nekā tikai cilpu un dažas darbības.
Tas ir izdarīts Burbona repozitorijā, lai pabeigtu modular-scale(… )funkciju no ietvara (lai gan tas ir noraidīts). Šeit ir kods:
@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; )Papildu apsvērumi
Nu, tas bija intensīvi. Ja jums ir nepieciešams atbalsts ne-veselu skaitļu eksponentiem (piemēram 4.2), es iesaku izmantot visu ārējo atkarību, kas to nodrošina (piemēram, sass-math-pow), nevis iekļaut visu šo kodu projektā. Ne tas, ka tā pati par sevi ir slikta lieta, taču patiesībā jūsu projektam nav tāda liela loma, lai mitinātu tik lielu bez autoru izveidotu polifillēšanas kodu (tāpēc mums ir pakotņu pārvaldnieki).
Ņemiet vērā arī to, ka visas šīs darbības ir diezgan intensīvas tik plānam slānim kā Sass. Šajā brīdī, un, ja jūsu dizains balstās uz uzlabotām matemātiskām funkcijām, iespējams, labāk ir nodot šo palīgu ieviešanu no augšējā slāņa (Node.js, Ruby uc) uz Sass, izmantojot spraudņu sistēmu (Eyeglass, Ruby dārgakmens utt.).
Bet pamata pow(… )lietošanai es nevaru pietiekami ieteikt vienkāršās versijas!