Aj keď je Sass veľmi užitočný pri počítaní, s matematickými pomocnými funkciami trochu zaostáva. V oficiálnom úložisku bola otvorená záležitosť, v ktorej sa požaduje, aby sa takmer 3 roky požadovali ďalšie matematické funkcie.
Niektorí dodávatelia tretích strán, ako sú Compass alebo SassyMath, poskytujú pokročilú podporu matematickým funkciám, sú to však externé závislosti, ktorým by sa dalo (malo by sa) vyhnúť.
Jednou z najpopulárnejších požiadaviek v tejto veci je výkonová funkcia alebo dokonca exponentový operátor. Bohužiaľ v Sass stále neexistuje žiadna podpora a zatiaľ čo o nej stále prebiehajú aktívne diskusie, je nepravdepodobné, že by sa tak stalo veľmi skoro.
Schopnosť zvýšiť počet na určitú mocnosť je medzitým v CSS veľmi užitočná. Tu je niekoľko príkladov, kedy by sa to hodilo:
- na stanovenie jasu farby;
- opraviť číslo na určité množstvo číslic;
- urobiť nejakú (inverznú) trigonometriu ...
Implementácia Sass
Našťastie pre nás je možné (a celkom jednoduché) vytvoriť silovú funkciu iba so Sassom. Potrebujeme iba slučku a niekoľko základných matematických operátorov (napríklad *a /).
Pozitívne celočíselné exponenty
Naša funkcia (pomenovaná pow) v najmenšej podobe by vyzerala takto:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Tu je príklad:
.foo ( width: pow(20, 2) * 1px; // 400px )Kladné alebo záporné celé čísla
Funguje to však iba s pozitívnym argumentom `$ power`. Povoliť záporné exponenty by nebolo také ťažké, potrebujeme len malú podmienku navyše:
@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; )Tu je príklad:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Pozitívne alebo negatívne exponenty
Čo teraz, keď chceme neceločíselné exponenty? Ako 4.2napríklad? Pravda je, že to naozaj nie je ľahké. Stále je to uskutočniteľné, ale vyžaduje to viac ako len slučku a niekoľko operácií.
Toto bolo urobené v repozitári Bourbon za účelom doplnenia modular-scale(… )funkcie z frameworku (aj keď to bolo odmietnuté). Tu je 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; )Ďalšie úvahy
No to bolo intenzívne. Ak potrebujete podporu pre neceločíselné exponenty (podobné 4.2), odporúčam vám namiesto zahrnutia tohto kódu do projektu použiť externú závislosť, ktorá ju poskytuje (napríklad sass-math-pow). Nie, že by to bolo samo o sebe zlá vec, ale nie je to vlastne úloha vášho projektu hostiť tak veľkú kopu neautorizovaného kódu na vyplnenie (preto máme správcov balíkov).
Tiež si všimnite, že všetky tieto operácie sú pre takú tenkú vrstvu ako Sass dosť náročné. V tomto okamihu, a ak sa váš návrh spolieha na pokročilé matematické funkcie, je pravdepodobne lepšie preniesť implementáciu týchto pomocníkov z hornej vrstvy (Node.js, Ruby atď.) Dole na Sass prostredníctvom systému doplnkov (Eyeglass, Ruby). klenot atď.).
Ale pre základné pow(… )použitie nemôžem dostatočne odporučiť jednoduché verzie!