Aritmeetika osas on Sass küll abiks matemaatiliste abifunktsioonide osas. Ametlikus hoidlas on olnud avatud küsimus, et küsida rohkem matemaatikaga seotud funktsioone peaaegu 3 aastat.
Mõned kolmanda osapoole pakkujad, nagu Compass või SassyMath, pakuvad matemaatikafunktsioonidele täpsemat tuge, kuid need on välised sõltuvused, mida võiks (tuleks?) Vältida.
Üks kõige populaarsemaid taotlusi selles küsimuses on võimsusfunktsioon või isegi eksponentoperaator. Kahjuks pole Sassil seda veel toetatud ja kuigi see on endiselt aktiivse arutelu all, ei juhtu see tõenäoliselt niipea.
Vahepeal on CSS-is väga kasulik, kui suudate arvu tõsta teatud võimsuseni. Siin on mõned näited, kus see oleks kasulik:
- värvi heleduse määramiseks;
- fikseerida number teatud arvu numbrite järgi;
- teha mingi (pöörd) trigonomeetria ...
Sassi rakendamine
Meie õnneks on võimalik (ja üsna lihtne) luua võimsusfunktsioon ainult Sassiga. Vaja on ainult tsüklit ja mõnda põhilist matemaatilist operaatorit (näiteks *ja /).
Positiivsed täisarvulised eksponendid
Meie funktsioon (nimega pow) näeks välja kõige väiksem:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Siin on näide:
.foo ( width: pow(20, 2) * 1px; // 400px )Positiivsed või negatiivsed täisarvulised eksponendid
Kuid see töötab ainult positiivse "$ power" argumendiga. Negatiivsete eksponentide lubamine poleks nii raske, vajame lihtsalt väikest lisatingimust:
@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; )Siin on näide:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Positiivsed või negatiivsed eksponendid
Mis siis saab, kui soovime mitte täisarvulisi eksponente? Nagu 4.2näiteks? Tõde on see, et see pole tõesti lihtne. See on endiselt teostatav, kuid see nõuab rohkem kui lihtsalt tsüklit ja mõnda toimingut.
Seda on tehtud Bourboni hoidlas modular-scale(… )funktsiooni raamistikust lõpuleviimiseks (kuigi see on tagasi lükatud). Siin on kood:
@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; )Edasised kaalutlused
Noh, see oli intensiivne. Kui juhtub, et vajate toetust mitte täisarvulistele eksponentidele (näiteks 4.2), soovitan teil kogu selle koodi oma projekti lisamise asemel kasutada välist sõltuvust, mis seda pakub (näiteks sass-math-pow). Mitte et see oleks iseenesest halb asi, kuid tegelikult pole teie projekti roll korraldada nii suurt komplekti autorita mitmetäitekoodi (seetõttu on meil paketihaldurid).
Pange tähele ka seda, et kõik need toimingud on sellise õhukese kihi jaoks nagu Sass üsna intensiivsed. Siinkohal ja kui teie disain tugineb täiustatud matemaatilistele funktsioonidele, on tõenäoliselt parem nende abistajate rakendamine ülemisest kihist (Node.js, Ruby jne) alla viia Sassile läbi pistikprogrammi (prillid, rubiin kalliskivi jne).
Kuid põhikasutuseks pow(… )ei saa ma piisavalt lihtsaid versioone soovitada!