Math Not Evaluated in CSS Custom Properties

I’ve noticed that variable calculations do not happen inside css var declarations. This came up when I wanted to do this:

--gutter: @gutter-width / 2;

This got translated into:

--gutter: 24px / 2;

I know the process of deciding when it should and shouldn’t automatically do math is complicated, but is there a way to force it to do that math on a per-property basis? Something like escaping literal strings but for escaping expressions? I’d be fine with using a function like math() or less().

[matthew-dean]

This is by design. CSS Custom property values are not parsed the same as other values, because they can contain almost any value whatsoever. Variables are replaced, however.

You can easily work around this by performing math outside the custom property, and assigning to a new variable.

@gutter: 12px;
.custom {
  @gutter-width: @gutter / 2;
  --gutter: @gutter-width;
}

Closing as expected behavior.

[rjgotten]

@jlixerkun That trades compile-time math done by the Less compiler for runtime math done by the browser, as well as increasing the size of the compiled CSS. If you’re dealing with a compile-time constant, then you should handle it at compile time and leave the runtime calc expressions as simple as possible.