Хоча Сасс дуже корисний з арифметикою, він трохи не відповідає математичним допоміжним функціям. Протягом майже 3 років в офіційному сховищі було відкрите видання, щоб попросити більше функцій, пов’язаних з математикою.
Деякі сторонні постачальники, такі як Compass або SassyMath, надають розширену підтримку математичних функцій, але це зовнішні залежності, яких можна (слід?) Уникати.
Одним з найпопулярніших запитів з цього питання є функція потужності або навіть оператор експоненти. На жаль, у Sass все ще немає підтримки для цього, і хоча це все ще активно обговорюється, навряд чи це станеться дуже скоро.
Тим часом можливість підняти число до певної міри дуже корисна в CSS. Ось кілька прикладів, коли це може стати в нагоді:
- для визначення яскравості кольору;
- закріпити число до певної кількості цифр;
- зробити якусь (зворотну) тригонометрію ...
Реалізація 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наприклад? Правда в тому, що це справді непросто. Це все ще можна здійснити, але для цього потрібно не лише цикл і кілька операцій.
Це було зроблено в сховищі Бурбонів, щоб завершити 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), замість того, щоб включати весь цей код у свій проект. Не те, що це погано як таке, але насправді роль вашого проекту не є розміщенням такого великого масиву неавторського коду для заповнення (тому у нас є менеджери пакетів).
Також зверніть увагу, що всі ці операції досить інтенсивні для такого тонкого шару, як Сасс. На даний момент, і якщо ваш дизайн покладається на вдосконалені математичні функції, можливо, краще передати реалізацію цих помічників з верхнього рівня (Node.js, Ruby тощо) до Sass через систему плагінів (Eyeglass, Ruby самоцвіт тощо).
Але для основного pow(… )використання я не можу рекомендувати досить прості версії!