{"id":237831,"date":"2016-02-09T07:26:59","date_gmt":"2016-02-09T14:26:59","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=237831"},"modified":"2016-02-09T07:26:59","modified_gmt":"2016-02-09T14:26:59","slug":"power-function","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/power-function\/","title":{"rendered":"Power Function"},"content":{"rendered":"<p>While very helpful with arithmetic, Sass falls a bit short with mathematical helper functions. There has been <a href=\"https:\/\/github.com\/sass\/sass\/issues\/851\" rel=\"noopener\">an open issue<\/a> on the official repository to ask for more math-related functions for almost 3 years. <\/p>\n<p>Some third-party vendors like <a href=\"http:\/\/compass-style.org\" rel=\"noopener\">Compass<\/a> or <a href=\"https:\/\/github.com\/at-import\/Sassy-math\" rel=\"noopener\">SassyMath<\/a> provide advanced support for math features, but they are external dependencies which could (should?) be avoided.<\/p>\n<p>One of the most popular request on this matter is a power function or even a <a href=\"https:\/\/github.com\/sass\/sass\/issues\/851\" rel=\"noopener\">exponent operator<\/a>. Unfortunately, there is still no support for this in Sass and while it is still under active discussion, it is unlikely to happen very soon.<\/p>\n<p>Meanwhile, being able to raise a number to a certain power happens to be very useful in CSS. Here are a few examples where it would come in handy:<\/p>\n<ul>\n<li>to determine the <a href=\"https:\/\/css-tricks.com\/snippets\/sass\/luminance-color-function\/\">luminance of a color<\/a>;<\/li>\n<li>to <a href=\"https:\/\/css-tricks.com\/snippets\/sass\/fix-number-n-digits\/\">fix a number to a certain amount of digits<\/a>;<\/li>\n<li>to do some (<a href=\"http:\/\/thesassway.com\/advanced\/inverse-trigonometric-functions-with-sass\" rel=\"noopener\">inverse<\/a>) <a href=\"https:\/\/unindented.org\/articles\/trigonometry-in-sass\/\" rel=\"noopener\">trigonometry<\/a>\u2026<\/li>\n<\/ul>\n<h3>Sass implementation<\/h3>\n<p>Fortunately for us, it is possible (and quite simple) to create a power function with nothing but Sass. All we need is a loop and some basic mathematical operators (such as <code>*<\/code> and <code>\/<\/code>).<\/p>\n<h4>Positive integer exponents<\/h4>\n<p>Our function (named <code>pow<\/code>) in its smallest form would look like this:<\/p>\n<pre class=\"language-scss\" rel=\"SCSS\"><code>@function pow($number, $exponent) {\r\n  $value: 1;\r\n\r\n  @if $exponent &gt; 0 {\r\n    @for $i from 1 through $exponent {\r\n      $value: $value * $number;\r\n    }\r\n  }\r\n\r\n  @return $value;\r\n}<\/code><\/pre>\n<p>Here is an example:<\/p>\n<pre class=\"language-scss\" rel=\"SCSS\"><code>.foo {\r\n  width: pow(20, 2) * 1px; \/\/ 400px\r\n}<\/code><\/pre>\n<h4>Positive or negative integer exponents<\/h4>\n<p>However it only works with a positive `$power` argument. Allowing negative exponents wouldn\u2019t be so hard, we just need a small extra condition:<\/p>\n<pre class=\"language-scss\" rel=\"SCSS\"><code>@function pow($number, $exponent) {\r\n  $value: 1;\r\n\r\n  @if $exponent &gt; 0 {\r\n    @for $i from 1 through $exponent {\r\n      $value: $value * $number;\r\n    }\r\n  } @else if $exponent &lt; 0 {\r\n    @for $i from 1 through -$exponent {\r\n      $value: $value \/ $number;\r\n    }\r\n  }\r\n\r\n  @return $value;\r\n}<\/code><\/pre>\n<p>Here is an example:<\/p>\n<pre class=\"language-scss\" rel=\"SCSS\"><code>.foo {\r\n  width: pow(10, -2) * 1px; \/\/ 0.0001px\r\n}<\/code><\/pre>\n<h4>Positive or negative exponents<\/h4>\n<p>Now, what if we want non-integer exponents? Such as <code>4.2<\/code> for instance? The truth is that it really is not easy. It still is doable, but it requires more than just a loop and a few operations.<\/p>\n<p>This has been done on the <a href=\"https:\/\/github.com\/thoughtbot\/bourbon\/issues\/717\" rel=\"noopener\">Bourbon<\/a> repository in order to complete the <code>modular-scale(..)<\/code> function from the framework (although has been declined). Here is the code:<\/p>\n<pre class=\"language-scss\" rel=\"SCSS\"><code>@function pow($number, $exponent) {\r\n  @if (round($exponent) != $exponent) {\r\n    @return exp($exponent * ln($number));\r\n  }\r\n    \r\n  $value: 1;\r\n  \r\n  @if $exponent &gt; 0 {\r\n    @for $i from 1 through $exponent {\r\n     $value: $value * $number;\r\n    }\r\n  } @else if $exponent &lt; 0 {\r\n    @for $i from 1 through -$exponent {\r\n      $value: $value \/ $number;\r\n    }\r\n  }\r\n\r\n  @return $value;\r\n}\r\n\r\n@function factorial($value) {\r\n  $result: 1;\r\n\r\n  @if $value == 0 {\r\n    @return $result;\r\n  }\r\n  \r\n  @for $index from 1 through $value {\r\n    $result: $result * $index;\r\n  }\r\n  \r\n  @return $result;\r\n}\r\n\r\n@function summation($iteratee, $input, $initial: 0, $limit: 100) {\r\n  $sum: 0;\r\n  \r\n  @for $index from $initial to $limit {\r\n    $sum: $sum + call($iteratee, $input, $index);\r\n  }\r\n  \r\n  @return $sum;\r\n}\r\n\r\n@function exp-maclaurin($x, $n) {\r\n  @return (pow($x, $n) \/ factorial($n));\r\n}\r\n\r\n@function exp($value) {\r\n  @return summation('exp-maclaurin', $value, 0, 100);\r\n}\r\n\r\n@function ln-maclaurin($x, $n) {\r\n  @return (pow(-1, $n + 1) \/ $n) * (pow($x - 1, $n));\r\n}\r\n\r\n@function ln($value) {\r\n  $ten-exp: 1;\r\n  $ln-ten: 2.30258509;\r\n  \r\n  @while ($value &gt; pow(10, $ten-exp)) {\r\n    $ten-exp: $ten-exp + 1;\r\n  }\r\n  \r\n  @return summation(ln-maclaurin, $value \/ pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten;\r\n}<\/code><\/pre>\n<h3>Further considerations<\/h3>\n<p>Well, that was intense. If you happen to need support for non-integer exponents (like <code>4.2<\/code>), I recommend you use an external dependency which provides it (such as <a href=\"https:\/\/www.npmjs.com\/package\/sass-math-pow\" rel=\"noopener\">sass-math-pow<\/a>) instead of including all this code in your project. Not that it is a bad thing per se, but it is not really the role of your project to host such a large a mount of non-authored polyfilling code (that\u2019s why we have package managers).<\/p>\n<p>Also note that all these operations are quite intensive for such a thin layer as Sass. At this point, and if your design rely on advanced mathematical functions, it is probably better to pass the implementation of these helpers from the upper layer (Node.js, Ruby, etc.) down to Sass through a plugin system (Eyeglass, Ruby gem, etc.).<\/p>\n<p>But for basic <code>pow(..)<\/code> usage, I can\u2019t recommend the simple versions enough!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While very helpful with arithmetic, Sass falls a bit short with mathematical helper functions. There has been an open issue on the official repository to ask for more math-related functions for almost 3 years. Some third-party vendors like Compass or SassyMath provide advanced support for math features, but they are external dependencies which could (should?) [&hellip;]<\/p>\n","protected":false},"author":40123,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/237831"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/40123"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=237831"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/237831\/revisions"}],"predecessor-version":[{"id":237842,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/237831\/revisions\/237842"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=237831"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=237831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}