Add more math functions

[tylermenezes]

(edited by @nex3)

• Proposal
• Specs
• Dart Sass
• LibSass
• Documentation

---

Sass, by default, has a very limited set of math functions. Some functions which are missing, but would be of use:

• sqrt
• pow
• mod
• log

This functionality can be added with third-party gems, but the fact that they're missing from the core just makes everything more difficult out-of-the-box.

There is very little benefit to keeping mathematical functions out of the core, because they have a standard, expected definition, so they're not really cluttering the namespace.

[KittyGiraudel]

References:

• https://github.com/Team-Sass/Sassy-math
• http://compass-style.org/reference/compass/helpers/math/

[chriseppstein]

👍

Note: modulo operations are available in Sass via the % operator.

[chriseppstein]

@nex3 do you object?

[ghost]

If we're going to add a log function, there should probably be log10 and log2 functions for convenience. Ordinary log should be base-e.

[nex3]

I want to wait on this until we have a better module story, since once we do it would be nice to put nice functions like this in a built-in module that can be imported with a prefix.

[booleanbetrayal]

👍

would love to to see expanded math functionality that mimics the compass implementation

[torkiljohnsen]

👍 Right now it's a pain to do stuff like pow($x, $y) if $y is a floating point number.

[KittyGiraudel]

Any chance of seeing this open again?

[Nevraeka]

@hugogiraudel 👍 We really need the compass functionality built in at the sass level. LibSass won't add this functionality until its standard in sass. We need better consistency across the projects in that respect. @nex3 what are the updates on the module system?

[nex3]

All feature work is currently on hold until Libsass reaches compatibility.

[ixisio]

+1

[dawidk92]

It would be nice to add trigonometric functions

+1

[dazld]

Really missing trig / math functions when using libsass, and the bottleneck seems to be here.. understand there is a lot going on, but if possible please do prioritise these valuable additions.

Generic math seems to me to be in a different category to other more specific functions that would belong in a custom extension.

[mootari]

@nex3 According to http://sass-compatibility.github.io/ libsass 3.3 has reached full feature parity. What compatibility issues that block this issue are still left?

[nex3]

It's not compatibility that's blocking this, it's getting a module system in place.

[chriseppstein]

Note that for node-sass users, using eyeglass + the eyeglass-math module will get you all of this functionality in the interim.

[cherscarlett]

I'm definitely going to +1 this here. I'm currently trying to get a number of colleagues to use SASS over LESS and these are core features in LESS that they'd need to utilize eyeglass + eyeglass-math to use.

[lunelson]

Why is the module system required for this actually? Because of existing codebases which may have already assigned functions to those names? In those cases the native functions would be just be overridden, but if those users remove their custom functions, the native ones would come through wouldn't they?

I would agree that much of JS Math is pretty edge-casey for CSS but one that is really important is Math.pow() for gamma compensation: there are many functions in the wild for trying to evaluate WCAG relative-luminance and subsequent contrast-ratios, (notably Bootstrap's yiq() Sass function) which are doing it incorrectly. Relative luminance calculation is impossible without pow().

[nex3]

The module system is required because we don't want to add top-level functions in one release only to deprecate them a few releases later; and because terse top-level functions run a high risk of conflicting with future CSS additions in ways that require lots of complexity to deal with (as we've already seen with min() and max()). In fact, if we'd added pow(), we would have run into exactly that issue.

If you're impatient to see the module system land, there's lots you could do that would help accelerate it, even without directly writing code. For example, one of my big tasks this quarter is fleshing out some tests in sass-spec; if someone else would pitch in to help with that, I could focus more time on implementing modules.

[lunelson]

@nex3 Wow! I never thought we'd see native math functions in CSS. I understand the point then—I've even found I need to suppress' Sass rgb() function in certain custom property use-cases—is there a document you can point me to, that explains where and how to help with sass-spec?

[nex3]

@lunelson The documentation in the repo could use some love. Let me update it and get back to you.

[nex3]

This pull request should add enough documentation for you to get started. Let me know if there's anything it doesn't explain adequately.

For function specs in particular, the variable-exists() spec is probably a good template to give you an idea of what they should look like. Every function Sass provides that doesn't have a spec yet needs one. You can look at the Ruby Sass function tests to get an idea of all the cases that need to be covered.

[lunelson]

Thanks @nex3 I'm going to try to wade in to it. Is there a priority list of some kind, as to which tests are most important for your work to progress? And/Or is there an issue/PR protocol to follow, wrt choosing what stuff to work on?

[nex3]

The goal is just to pay off technical debt, so all functions are pretty much equal priority.

…

On Sat, Mar 16, 2019, 10:59 AM Lu Nelson ***@***.***> wrote: OK so is there a priority list of some kind, as to which tests are most important for your work to progress? And/Or if I pick something out myself do I need to file an issue to discuss it first? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#851 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAAvKldQ_dMwkt-YZ9LCB39XKR2kuHzks5vXTD_gaJpZM4A0Rtw> .

[nex3]

The module system has landed, so I'm officially marking this "planned". I'd like to expose Sassified versions of all the mathematical functions in the Values and Units 4 Draft, modulo, and logarithms (probably as a single function with an optional $base argument that defaults to e). I'd also like to expose $e and $pi variables.

There are some interesting questions about what these functions should do with units; fortunately, the CSS working group has done a lot of the hard work of figuring that out for us already in Values and Units 4! The only remaining questions are modulo (which should require its arguments to have compatible units and return the same unit) and logarithms (which I think should require unitless arguments).

[nex3]

@Awjin's math function proposal has landed and is now officially open for comment. I'll leave it open for a couple weeks before marking it as accepted.

[nex3]

Closing this out because LibSass is now deprecated and we aren't expecting to add any additional features to it.