Bár Sass nagyon hasznos a számtanban, Sass kissé elmarad a matematikai segítő funkcióktól. A hivatalos adattárban nyílt kérdés volt, hogy majdnem 3 éve további matematikai funkciókat kérjen.
Egyes harmadik féltől származó gyártók, például az Compass vagy a SassyMath speciális támogatást nyújtanak a matematikai funkciókhoz, de ezek külső függőségek, amelyeket el lehetne (kellene?) Kerülni.
Az egyik legnépszerűbb kérés ebben a kérdésben egy teljesítményfüggvény vagy akár egy exponens operátor. Sajnos Sass még mindig nem támogatja ezt, és bár ez még mindig aktív vita alatt áll, nem valószínű, hogy ez hamarosan bekövetkezik.
Eközben a CSS-ben nagyon hasznos lehet egy számot bizonyos szintre emelni. Íme néhány példa, ahol jól jönne:
- a szín fényerejének meghatározása;
- rögzíteni egy számot egy bizonyos számjegyre;
- néhány (inverz) trigonometria elvégzése ...
Sass megvalósítás
Számunkra szerencsére lehetséges (és meglehetősen egyszerű) létrehozni egy teljesítményfüggvényt Sasson kívül. Csak egy hurokra és néhány alapvető matematikai operátorra van szükségünk (például *és /).
Pozitív egész kitevők
A (megnevezett pow) függvényünk a legkisebb formájában így néz ki:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Íme egy példa:
.foo ( width: pow(20, 2) * 1px; // 400px )Pozitív vagy negatív egész kitevők
Ez azonban csak pozitív "$ power" argumentummal működik. A negatív kitevők engedélyezése nem lenne olyan nehéz, csak egy kis extra feltételre van szükségünk:
@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; )Íme egy példa:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Pozitív vagy negatív kitevők
És mi van, ha nem egész kitevőket akarunk? Ilyen 4.2például? Az igazság az, hogy valóban nem könnyű. Még mindig kivitelezhető, de nem csak ciklust és néhány műveletet igényel.
Ezt a Bourbon adattárban tették meg annak érdekében, hogy a modular-scale(… )függvény a keretrendszerből teljes legyen (bár elutasították). Itt van a kód:
@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; )További megfontolások
Nos, ez intenzív volt. Ha véletlenül szüksége van nem egész számú kitevők támogatására (például 4.2), akkor azt javasoljuk, hogy használjon egy külső függőséget, amely biztosítja (például a sass-math-pow), ahelyett, hogy az összes kódot belefoglalná a projektbe. Nem mintha önmagában is rossz dolog lenne, de valójában a projektjének nem az a feladata, hogy ekkora méretű, nem szerzői polifill kódot használjon (ezért vannak csomagkezelőink).
Vegye figyelembe azt is, hogy ezek a műveletek meglehetősen intenzívek egy olyan vékony réteg számára, mint a Sass. Ezen a ponton, és ha a tervezése fejlett matematikai függvényekre támaszkodik, valószínűleg jobb, ha ezeknek a segítőknek a megvalósítását a felső rétegről (Node.js, Ruby stb.) A Sass felé továbbítja egy plugin rendszeren keresztül (Eyeglass, Ruby drágakő stb.).
De alapvető pow(… )használatra nem tudom eléggé ajánlani az egyszerű verziókat!