Request For Comments: First-Class Calc
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
However, it comes at a substantial usability cost as well. Because each
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
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
we want to make sure mathematical functions are explicit about whether or not
they support calculations by either wrapping all of their math in
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
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!
>>> Read the Full Story at Sass Blog