Chociaż jest bardzo pomocny w arytmetyce, Sass nie radzi sobie z matematycznymi funkcjami pomocniczymi. W oficjalnym repozytorium był otwarty problem z prośbą o więcej funkcji związanych z matematyką przez prawie 3 lata.
Niektórzy dostawcy zewnętrzni, tacy jak Compass lub SassyMath, zapewniają zaawansowaną obsługę funkcji matematycznych, ale są to zewnętrzne zależności, których można (należy?) Unikać.
Jednym z najpopularniejszych żądań w tej sprawie jest funkcja potęgowa lub nawet operator wykładnika. Niestety, w Sass nadal nie ma na to poparcia i chociaż jest nadal przedmiotem aktywnej dyskusji, jest mało prawdopodobne, aby nastąpiło to wkrótce.
Tymczasem możliwość podniesienia liczby do określonej potęgi jest bardzo przydatna w CSS. Oto kilka przykładów, w których może się to przydać:
- określić luminancję koloru;
- ustalić liczbę z określoną liczbą cyfr;
- zrobić jakąś (odwrotną) trygonometrię…
Wdrożenie Sass
Na szczęście dla nas jest możliwe (i całkiem proste) stworzenie funkcji potęgowej tylko z Sassem. Potrzebujemy tylko pętli i kilku podstawowych operatorów matematycznych (takich jak *i /).
Dodatnie wykładniki całkowite
Nasza funkcja (nazwana pow) w najmniejszej postaci wyglądałaby następująco:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Oto przykład:
.foo ( width: pow(20, 2) * 1px; // 400px )Dodatnie lub ujemne wykładniki całkowite
Jednak działa tylko z dodatnim argumentem `$ power`. Dopuszczenie ujemnych wykładników nie byłoby takie trudne, potrzebujemy tylko małego dodatkowego warunku:
@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; )Oto przykład:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Dodatnie lub ujemne wykładniki
A co, jeśli chcemy niecałkowitych wykładników? Takich jak 4.2na przykład? Prawda jest taka, że to naprawdę nie jest łatwe. Jest to nadal wykonalne, ale wymaga czegoś więcej niż tylko pętli i kilku operacji.
Zrobiono to w repozytorium Bourbon w celu ukończenia modular-scale(… )funkcji z frameworka (chociaż zostało odrzucone). Oto kod:
@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; )Dalsze rozważania
Cóż, to było intensywne. Jeśli potrzebujesz obsługi wykładników nie będących liczbami całkowitymi (takich jak 4.2), zalecam użycie zewnętrznej zależności, która ją zapewnia (na przykład sass-math-pow) zamiast włączać cały ten kod do swojego projektu. Nie chodzi o to, że jest to zła rzecz sama w sobie, ale tak naprawdę rolą twojego projektu nie jest hostowanie tak dużej liczby nieautoryzowanego kodu polyfilling (dlatego mamy menedżerów pakietów).
Należy również pamiętać, że wszystkie te operacje są dość intensywne dla tak cienkiej warstwy jak Sass. W tym momencie, jeśli twój projekt opiera się na zaawansowanych funkcjach matematycznych, prawdopodobnie lepiej jest przekazać implementację tych pomocników z górnej warstwy (Node.js, Ruby itp.) Do Sassa przez system wtyczek (Eyeglass, Ruby klejnot itp.).
Ale do podstawowego pow(… )użycia nie mogę wystarczająco polecić prostych wersji!