Функция питания онлайн урок.


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

@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 < 0 {
@for $i from 1 through -$exponent {
$value: $value / $number;
}
}

@return $value;
}

@function factorial($value) {
$result: 1;

@if $value == 0 {
@return $result;
}

@for $index from 1 through $value {
$result: $result * $index;
}

@return $result;
}

@function summation($iteratee, $input, $initial: 0, $limit: 100) {
$sum: 0;

@for $index from $initial to $limit {
$sum: $sum + call($iteratee, $input, $index);
}

@return $sum;
}

@function exp-maclaurin($x, $n) {
@return (pow($x, $n) / factorial($n));
}

@function exp($value) {
@return summation('exp-maclaurin', $value, 0, 100);
}

@function ln-maclaurin($x, $n) {
@return (pow(-1, $n + 1) / $n) * (pow($x - 1, $n));
}

@function ln($value) {
$ten-exp: 1;
$ln-ten: 2.30258509;

@while ($value > 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 (..)я не могу рекомендовать простые версии достаточно!