Хотя Sass очень полезен с арифметикой, он немного не хватает математических вспомогательных функций. В официальном репозитории была открытая проблема с запросом дополнительных функций, связанных с математикой, в течение почти 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(… )использования я не могу рекомендовать достаточно простые версии!