Selv om det er veldig nyttig med regning, kommer Sass litt til kort med matematiske hjelperfunksjoner. Det har vært en åpen utgave på det offisielle depotet for å be om mer matte-relaterte funksjoner i nesten 3 år.
Noen tredjepartsleverandører som Compass eller SassyMath gir avansert støtte for matematiske funksjoner, men de er eksterne avhengigheter som kan (bør?) Unngås.
En av de mest populære forespørslene i denne saken er en strømfunksjon eller til og med en eksponentoperatør. Dessverre er det fortsatt ingen støtte for dette i Sass, og mens det fortsatt er under aktiv diskusjon, er det lite sannsynlig at det vil skje veldig snart.
I mellomtiden er det veldig nyttig i CSS å kunne heve et tall til en viss makt. Her er noen eksempler der det ville være nyttig:
- å bestemme luminansen til en farge;
- å fikse et tall til en viss mengde sifre;
- å gjøre litt (omvendt) trigonometri ...
Sass implementering
Heldigvis for oss er det mulig (og ganske enkelt) å lage en kraftfunksjon uten annet enn Sass. Alt vi trenger er en sløyfe og noen grunnleggende matematiske operatører (som *og /).
Positive heltal eksponenter
Vår funksjon (navngitt pow) i sin minste form vil se slik ut:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Her er et eksempel:
.foo ( width: pow(20, 2) * 1px; // 400px )Positive eller negative heltallseksponenter
Imidlertid fungerer det bare med et positivt '$ power' argument. Å tillate negative eksponenter ville ikke være så vanskelig, vi trenger bare en liten ekstra tilstand:
@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; )Her er et eksempel:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Positive eller negative eksponenter
Nå, hva om vi vil ha ikke-heltall eksponenter? Slik som 4.2for eksempel? Sannheten er at det virkelig ikke er lett. Det er fremdeles mulig, men det krever mer enn bare en sløyfe og noen få operasjoner.
Dette har blitt gjort på Bourbon-depotet for å fullføre modular-scale(… )funksjonen fra rammeverket (selv om det er blitt avvist). Her er koden:
@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; )Ytterligere hensyn
Vel, det var intenst. Hvis du tilfeldigvis trenger støtte for ikke-heltall eksponenter (som 4.2), anbefaler jeg at du bruker en ekstern avhengighet som gir den (for eksempel sass-math-pow) i stedet for å inkludere all denne koden i prosjektet. Ikke at det i seg selv er en dårlig ting, men det er egentlig ikke prosjektets rolle å være vert for en så stor montering av ikke-forfattet polyfilling-kode (det er derfor vi har pakkeforvaltere).
Vær også oppmerksom på at alle disse operasjonene er ganske intensive for et så tynt lag som Sass. På dette punktet, og hvis designet ditt er avhengig av avanserte matematiske funksjoner, er det sannsynligvis bedre å overføre implementeringen av disse hjelperne fra det øvre laget (Node.js, Ruby, etc.) ned til Sass gjennom et pluginsystem (Eyeglass, Ruby perle, etc.).
Men for grunnleggende pow(… )bruk kan jeg ikke anbefale de enkle versjonene nok!