Power/exponent expression support #684

scottkellum opened this Issue Mar 13, 2013 · 51 comments

Thoughts on adding native support for exponents in Sass expressions? While a simple loop can easily calculate positive integers, other values are more difficult to calculate. It can be done but not efficiently in pure Sass.

Preferred syntax would be like Ruby:


A function could work as well:

pow(5px, 2)
@scottkellum scottkellum referenced this issue in modularscale/modularscale-sass Mar 13, 2013

Refactor #46


I very much like the ruby syntax. If there's an internal conflict that makes that difficult, most people understand the caret syntax too:


That is how Sass deals with a manual square right now. Obviously the intention would be for it to be 25px.


What's the use case for non-integer exponents? I'm not sure we want to move towards adding a full complement of mathematical operations in core Sass. That seems like a good thing for extensions to do.

It would be pretty confusing if pow(5px, 2) didn't return a result in square pixels.


@nex3 I want to remove the need for Ruby in the modular scale extension. While CodeKit, Mixture, and other tools do support extensions, the process is far too complex for a significant portion of that audience. Distributing Ruby extensions via Bower is also problematic.

to be clear, pow(5px, 2) = 25px and pow(5px, 2.5) = 55.901699437px. Your example would result in square pixels. I have found half units to be useful when setting type on an exponential(modular) scale and the scale moves too quickly in that area.


@nex3 I want to remove the need for Ruby in the modular scale extension. While CodeKit, Mixture, and other tools do support extensions, the process is far too complex for a significant portion of that audience. Distributing Ruby extensions via Bower is also problematic.

What makes this so difficult? Ruby-based extensions are never going to be completely avoidable for complex operations. I'd like to make them easier to use rather than essentially unusable.

pow(5px, 2) = 25px

Your example would result in square pixels.

These two statements seem contradictory.

I have found half units to be useful when setting type on an exponential(modular) scale and the scale moves too quickly in that area.

What do you mean by "half units" and "the scale moves too quickly"?


Half units == decimal exponents, and "the scale moves to quickly" is behavior specific to the modular scale extension.

I think the main point is right now we can make an exponent function in an extension and distribute it, but it would be more convenient to have a native-to-the-parser syntax. Exponents are one step up from basic math, and a native syntax would encourage authors to use and experiment with them. So the decision is: should exponents be in Sass, or should they be provided by a function in an extension?


We're definitely not adding syntax support for exponents; the functionality isn't broadly applicable enough. We could potentially add a function for it, but there is a line of niche uses past which we won't add math functions. Should we add root functions? Logarithms? Trigonometry?

I'd much rather see a math package that encapsulates all of these and keeps them out of the core set of functions. Then they're available for libraries that need them, but they don't clutter up the default namespace with functions that just aren't useful to most users.


That's reasonable. @scottkellum, want to collab on a Sassy Math package?


@robwierzbowski Kinda like https://github.com/scottkellum/sassy-math 👅
If we're missing something, happy to add more.


Ha, well look at that. Consider it 'd


If the syntax doesn't support at least exponentiation - how does complex math get dealt with in libsass? Most of the examples that come to mind could be calculated by hand and assigned to a variable, but isn't that true of most Sass numerical operations?


I recently started to work deeply with color spaces and in order to build the w3c relative luminance function, a decimal power is required. This is non-trivial to calculate by hand and while having a Ruby function would allow this to work, it would do so at the loss of cross-compiler compatibility.


I was just working on the exact same thing @Snugug. At some point an x^2.4 was needed for almost all colors in that calculation. Using the Sass-native pow() function from https://github.com/terkel/mathsass 10 times resulted in a serious slowdown in compile speed. This was the only Sass-implementation I was able to find for decimal exponents.

My purpose with this was automatic color adjustment to ensure AA-compatible color contrasts. The contrast-calculating function was the one doing the ^2.4.

I managed to cook up something a bit faster, but still very slow:

x^2.4 = x^2 * x^0.4 
x^0.4 = x^4/10 = x^2/5 = (x^1/5)^2

In other words:
x^2.4 = x^2 * (x^1/5)^2

x^1/5 = the fifth root of x.

I proceded to implement an nth-root-function: (note the hard-coded $guess!)

@function nth-root-estimate($number, $guess, $n) {
  @return 1/$n * (($number/pow($guess, $n - 1)) - $guess);

@function nth-root($number, $degree, $precision: 5) {
  $guess: 2.7;
  $previous-guess: 0;

  // While precision has not been met, keep guessing
  @while round($previous-guess * pow(10, $precision)) != round($guess * pow(10, $precision)) {
    $previous-guess: $guess;
    $guess: $guess + nth-root-estimate($number, $guess, 5);

  @return $guess;

This is the first time I have come to the sad conclusion that I should have been using less :(


Here's the code I was testing out. See "Usage" at the bottom, and see the 2.4-pow() on line 9.



For now, to achieve better speed, I hard-coded a list of pre-calculated 5th root numbers for the color numbers in question. Looking up an item in a list that is 255 items long is a lot quicker than calculating the 5th root.


FWIW I think we should keep this discussion focused on arguments for or against the Sass feature in question (native pow() function). Examples of use cases are helpful arguments for this but details and work arounds to implement specific use cases are likely not helping the debate here.

@torkiljohnsen The Ruby dependency thread on sass-a11y may be a better place for these workaround suggestions.

To sum up arguments for a native pow() function in Sass:


+1 for this feature, very needed for some easing calculations.



I can't think of a reason why "basic" math functions should not be native like in Javascript nor functions for conversion like deg(number/deg/rad/grad/turn) – now we have to do it by hand like this .

I fail to see why abs, max, ceil and floor are fine – but not pow, sqrt, sin, cos... and how adding them will clutter up the default namespace for "most users".

Sorry if it sounded grumpy :-)

PS. The math functions in Less

@scottkellum scottkellum referenced this issue in modularscale/modularscale-sass Feb 23, 2015

Decimal powers and memoization #89



I also want to use decimals within pow for a modular scale lib I'm working on.

@jakob-e makes some pretty compelling arguments as well.

It's goofy Sass doesn't support math.

@corysimmons corysimmons added a commit to corysimmons/typographic that referenced this issue Mar 25, 2015
@corysimmons corysimmons Attach modular scale to headers
Will base Sass off actual modular scale when it supports it natively: sass/sass#684

@davidkpiano So math-pow(12, 3.4) returns 4668.92127 without having to get Compass and all that stuff involved??


@corysimmons That's correct. No dependencies. Gotta love Maclaurin series 😄


Awesome, thanks for this. I'll try to implement it tonight.


What @jakob-e said. Look to Less.


How is the performance @davidkpiano? That's been my main obstacle so far.


This isn't really the place to have a preprocessor war. besides Stylus > all

I can testify performance is horrible, but it does the job, and since I'm providing my library in both Sass and Stylus it will give users a good look at some of my preferred preprocessor's strengths.


@torkiljohnsen performance is a problem due to the many (slow) iterations. You can gain a little
using memoization (if you run the same calculations many times). Here is a simple example based on mathsass. But as stated IMO math is expected in any languages and not having a native method causes tool builders to include their own different versions and after import it becomes mirky which is used (at least to me ;-).

This is my shortlist of what I would like to see:

  • pow()
  • sqrt()
  • sin()
  • asin()
  • cos()
  • acos()
  • tan()
  • atan()

.. and also a couple of constants:

  • E() => 2.718281828459045
  • PI() => 3.141592653589793
  • PHI()=> 1.618033988749894
  • LN2()=> 0.693147180559945
  • SQRT2() => 1.414213562373095

@jakob-e Agreed^1000. There should ideally be one, correct implementation of pow(). Having everyone and their grandmother implement their own versions, with perhaps accuracy tradeoffs for extra speed, is not ideal.

Math is expected in any language.


I realize a conversation I had with @nex3 at SassConf about this somehow didn't make it in to this thread.

She said that she would be much more likely to be OK with more Sass-land functions (including a full math package) once #1094 landed and they could be bundled as optional libraries someone could pull in. Actually, on second read, she seems to mention it in this commend above. Either way, right now there is a very stable Ruby implementation of advanced math functions, and now that custom functions has landed in node-sass, expect one for that too.


I don't mind the idea of bypassing Compass and @importing custom Ruby packages to Sass libs, but I didn't see anything in #1094 that had anything to do with this. Maybe I overlooked it.

I'll try to see if I can get memoization working with decimal exponents and if I can't then I'm not going to keep worrying about it. Sass can do it's slow thing.


@corysimmons Namespaced imports in that issue.


Would that import Ruby-ish functions or just standard Sass libs? If the latter it wouldn't be of much use to us.


@jakob-e Oddly enough, the (undocumented) functions pi() and e() exist in Ruby Sass, which return the respective constants. I can't really remember how I stumbled upon those.

$pi: pi(); // 3.14159
$e: e(); // 2.71828

@Snugug @nex3 I understand that Sass can easily be extended with Ruby, as a lib extension, or through Eyeglass. However I think the argument this thread is trying to make is that this is important as a core feature of the Sass spec. There are environments where deep level Sass extensions are difficult and they dramatically increase the complexity of installing and distributing code.


@scottkellum EDIT: Apparently Compass passes functions even without being imported.


@davidkpiano Yeah, Sassmeister and Codepen both use Compass.

EDIT: It doesn’t matter if you import Compass, Ruby functions are passed through without imports. If you are compiling your Sass with Compass then all the Ruby extensions are available by default.


@scottkellum agreed, but until it's available, there are fairly easy to use plugin implementations.

@corysimmons Take a read of that thread. It's a total re-write of Sass's import system.


I read it, and a few of the linked threads, still seemed like it was just referring to how it imports Sass files, not exposing Ruby functions. I'm probably stupid - been up all night.

I'd still agree with @scottkellum that core math functions (like support for exponents) should probably be part of Sass core - especially if it's going to take another year or so for the import system to get rewrote.

You can always pull core stuff out to modules once the import-rewrite PR goes through, so even if you were just to add these math functions in now, and then in 2-3 years when this goes through you could just take them out (along with a bunch of other stuff to make Sass more modular).


The idea is, once namespacing is available, if I understood @nex3 correctly, is that more core functions could be shipped as optional imports so as to not pollute the namespace.


Yeah that'd be cool/optimal.

Again though, I wonder how long it would take to actually ship and what harm could come from shipping some core math functions now and then simply pulling them out when the namespacing stuff goes through.


The ** syntax Stylus and Ruby use is really nice. It’s a standard operator instead of a function. Not sure how that plays into namespace polluting but nobody said this needs to be a function.


@scottkellum IMO you should keep the syntax as close to "basic front end" (HTML,CSS,JS) as possible – why pow($base, $exponent) is the better choice (and why ^ (XOR) should not be used either).

Arithmetic operators in JS:
 +  Addition
 -  Subtraction
 *  Multiplication
 /  Division
 %  Modulus
 ++ Increment    
 -- Decrement

PS. in relation to my suggested constant functions – if/when namespaces becomes available I picture them looking something like this math.$LN2 or @math.$LN2 or... but that's another story :)


IMO you should keep the syntax as close to "basic front end" (HTML,CSS,JS) as possible – why pow($base, $exponent)

Note, tho, the currently-happening proposals to add an exponentiation operator to JS, spelled **. There's a bit of argument over whether it should require parens around the base or not (to prevent confusion when unary operators are employed, like -2**2 - is that 4 ((-2)**2) or -4 (-(2**2))?) but I'm fairly certain the operator will make it in.

Sass member

Integer exponents on a number with units should always compute to (base ^ exponent)(unit^exponent).

Decimal exponents with units are strange to me. Not sure whether it should be an error or include a fractional unit (which is unlikely to cancel, therefore is rarely going to be printable as a CSS unit -- another kind of error that's harder to debug).

If you want the same unit you'll need to do something like: pow($somevalueinpixels / 1px, 3) * 1px


This has been open a few years. Have you had time to consider it and make a decision? 🍕


3 years to come up with a namespace? 👏 💨

Actually, nevermind. I'll write lib in something else. Have nice day.


@corysimmons No, 3 years to come up with a good, solid spec and implementation of namespacing and modules, while also handling all the other bugs and improvements that a popular living project like Sass generates.

Being rude can feel a little good in the moment, but it's never polite, and it's a major contributor to project-maintainer burnout. Next time you feel the need to leave a comment while annoyed, please consider waiting a while to cool down, and if you still feel like being a little rude, consider not posting at all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment