I když je velmi užitečný s aritmetikou, Sass trochu chybí s matematickými pomocnými funkcemi. V oficiálním repozitáři je otevřený problém, který žádá o další matematické funkce téměř 3 roky.
Někteří prodejci třetích stran, jako je Compass nebo SassyMath, poskytují pokročilou podporu matematických funkcí, ale jedná se o externí závislosti, kterým by se dalo (mělo by se) vyhnout.
Jedním z nejpopulárnějších požadavků v této věci je výkonová funkce nebo dokonce exponentový operátor. Bohužel v Sassu pro to stále neexistuje žádná podpora, a přestože je stále v aktivní diskusi, je nepravděpodobné, že by se to stalo velmi brzy.
Mezitím je schopnost zvýšit číslo na určitou moc v CSS velmi užitečná. Zde je několik příkladů, kdy by se to hodilo:
- určit jas barvy;
- opravit číslo na určité množství číslic;
- udělat nějakou (inverzní) trigonometrii ...
Implementace Sass
Naštěstí pro nás je možné (a docela jednoduché) vytvořit výkonovou funkci pouze s Sassem. Vše, co potřebujeme, je smyčka a některé základní matematické operátory (například *a /).
Kladné celočíselné exponenty
Naše funkce (pojmenovaná pow) v nejmenší podobě by vypadala takto:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Zde je příklad:
.foo ( width: pow(20, 2) * 1px; // 400px )Kladné nebo záporné celočíselné exponenty
Funguje to však pouze s pozitivním argumentem `$ power`. Povolit záporné exponenty by nebylo tak těžké, potřebujeme jen malou podmínku navíc:
@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; )Zde je příklad:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Kladné nebo záporné exponenty
Co když chceme neintegrované exponenty? Jako 4.2například? Pravdou je, že to opravdu není snadné. Stále je to možné, ale vyžaduje to víc než jen smyčku a několik operací.
To bylo provedeno v úložišti Bourbon za účelem dokončení modular-scale(… )funkce z rámce (i když to bylo odmítnuto). Zde je kód:
@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; )Další úvahy
To bylo intenzivní. Pokud náhodou potřebujete podporu pro jiné než celočíselné exponenty (jako 4.2), doporučuji místo zahrnutí celého tohoto kódu do vašeho projektu použít externí závislost, která ji poskytuje (například sass-math-pow). Ne že by to bylo samo o sobě špatná věc, ale není to vlastně role vašeho projektu hostit tak velkou hromadu neautorizovaného polyfillingového kódu (proto máme správce balíčků).
Všimněte si také, že všechny tyto operace jsou pro tak tenkou vrstvu, jako je Sass, poměrně intenzivní. V tomto okamžiku, a pokud se váš návrh spoléhá na pokročilé matematické funkce, je pravděpodobně lepší předat implementaci těchto pomocníků z horní vrstvy (Node.js, Ruby atd.) Dolů na Sass prostřednictvím systému pluginů (Eyeglass, Ruby klenot atd.).
Ale pro základní pow(… )použití nemohu dostatečně doporučit jednoduché verze!