Request for Comments: FirstClass Calc
Posted 15 March 2021 by Natalie Weizenbaum
One of the absolutely mostrequested 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 calc()
.
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 "FirstClass Calc".
This proposal changes calc()
(and other supported mathematical functions) from
being parsed as unquoted strings to being parsed indepth, 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
compiletime, 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 compiletime, 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.
For example:

calc(1px + 10px)
will return the number11px
. 
Similarly, if
$length
is10px
,calc(1px + $length)
will return11px
. 
However,
calc(1px + 10%)
will return the calccalc(1px + 10%)
. 
If
$length
iscalc(1px + 10%)
,calc(1px + $length)
will returncalc(2px + 10%)
. 
Sass functions can be used directly in
calc()
, socalc(1% + math.round(15.3px))
returnscalc(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 highlypermissive 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!Let us know what you think! permalink
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!