Request for Comments: First-Class Calc
Posted 15 March 2021 by Natalie Weizenbaum
One of the absolutely most-requested features in Sass is the ability to more easily work with
calc() expressions. These expressions have historically been parsed opaquely: between the parentheses, you can put any text at all, and Sass will just treat it as an unquoted string. This has simplified Sass’s parser, since we don’t have to support the specific
calc() microsyntax, and it’s meant that we automatically support new features like the use of CSS variables within
However, it comes at a substantial usability cost as well. Because each
calc() is totally opaque to Sass’s parser, users can’t simply use Sass variables in place of values; they have to interpolate variables explicitly. And once a
calc() expression has been created, there’s no way to manipulate it with Sass the way you can manipulate a plain number.
We’re looking to change that with a new proposal we call “First-Class Calc”. This proposal changes
calc() (and other supported mathematical functions) from being parsed as unquoted strings to being parsed in-depth, and sometimes (although not always) producing a new data type known as a “calculation”. This data type represents mathematical expressions that can’t be resolved at compile-time, such as
calc(10% + 5px), and allows those expressions to be combined gracefully within further mathematical functions.
To be more specific: a
calc() expression will be parsed according to the CSS syntax, with additional support for Sass variables, functions, and (for backwards compatibility) interpolation. Sass will perform as much math as possible at compile-time, and if the result is a single number it will return it as a normal Sass number type. Otherwise, it will return a calculation that represents the (simplified) expression that can be resolved in the browser.
calc(1px + 10px)will return the number
calc(1px + $length)will return
calc(1px + 10%)will return the calc
calc(1px + 10%).
calc(1px + 10%),
calc(1px + $length)will return
calc(2px + 10%).
Sass functions can be used directly in
calc(1% + math.round(15.3px))returns
calc(1% + 15px).
Note that calculations cannot generally be used in place of numbers. For example,
1px + calc(1px + 10%) will produce an error, as will
math.round(calc(1px + 10%)). This is because calculations can’t be used interchangeably with numbers (you can’t pass a calculation to
math.sqrt()), so we want to make sure mathematical functions are explicit about whether or not they support calculations by either wrapping all of their math in
calc() or using normal Sass arithmetic.
For backwards compatibility,
calc() expressions that contain interpolation will continue to be parsed using the old highly-permissive syntax, although this behavior will eventually be deprecated and removed. These expressions will still return calculation values, but they’ll never be simplified or resolve to plain numbers.
Let us know what you think! permalinkLet us know what you think!
If you’re interested in learning more about this proposal, read it in full on GitHub. It’s open for comments and revisions for the next month, so if you’d like to see something change please file an issue and we can discuss it!