Въпреки че е много полезен с аритметиката, Сас е малко по-кратък с математическите помощни функции. В официалното хранилище има открит въпрос, в който се искат повече функции, свързани с математиката, в продължение на почти 3 години.
Някои доставчици на трети страни като Compass или SassyMath предоставят разширена поддръжка за математически функции, но те са външни зависимости, които биха могли (трябва?) Да се избегнат.
Една от най-популярните заявки по този въпрос е степенна функция или дори експонентен оператор. За съжаление, все още няма подкрепа за това в Sass и въпреки че все още е в процес на активно обсъждане, едва ли ще се случи много скоро.
Междувременно възможността да се повиши число до определена степен е много полезна в CSS. Ето няколко примера, когато би било полезно:
- за определяне на яркостта на даден цвят;
- да фиксирате число до определен брой цифри;
- да се направи някаква (обратна) тригонометрия ...
Прилагане на Sass
За наше щастие е възможно (и съвсем просто) да създадем функция за захранване с нищо освен Sass. Всичко, от което се нуждаем, е цикъл и някои основни математически оператори (като *и /).
Положителни цели числа експоненти
Нашата функция (наименувана pow) в най-малката си форма ще изглежда така:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Ето пример:
.foo ( width: pow(20, 2) * 1px; // 400px )Положителни или отрицателни експоненти на цяло число
Въпреки това работи само с положителен аргумент `$ power`. Разрешаването на отрицателни експоненти няма да е толкова трудно, просто се нуждаем от малко допълнително условие:
@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; )Ето пример:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Положителни или отрицателни експоненти
Ами ако искаме нецелочислени експоненти? Като 4.2например? Истината е, че наистина не е лесно. Все още е осъществимо, но изисква повече от обикновен цикъл и няколко операции.
Това е направено в хранилището на Bourbon, за да се изпълни modular-scale(… )функцията от рамката (въпреки че е отхвърлена). Ето кода:
@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; )Допълнителни съображения
Е, това беше интензивно. Ако случайно се нуждаете от поддръжка за нецели експоненти (като 4.2), препоръчвам ви да използвате външна зависимост, която я предоставя (като sass-math-pow), вместо да включвате целия този код във вашия проект. Не че е лошо нещо само по себе си, но всъщност не е ролята на вашия проект да хоства толкова голям набор от неавторски кодове за многопълване (затова имаме мениджъри на пакети).
Също така имайте предвид, че всички тези операции са доста интензивни за такъв тънък слой като Sass. В този момент и ако вашият дизайн разчита на усъвършенствани математически функции, вероятно е по-добре да предадете изпълнението на тези помощници от горния слой (Node.js, Ruby и др.) Надолу към Sass чрез система за приставки (Eyeglass, Ruby скъпоценен камък и др.).
Но за основно pow(… )използване не мога да препоръчам достатъчно опростените версии!