Last Updated: February 25, 2016
· shekhardesigner

CSS3 calc() in LESS CSS

Today I was banging my head that CSS3 calc() property was not working correctly in any browsers. Then I realized I am using LESS and any math operators between brackets would be calculated and then only CSS would be parsed by browsers.

My problem was:

@asideWidth: 30px;

.post {
    width: calc(100% - @asideWidth);

This was giving me output as 70%. Horrible. Right after the moment, I realized - anything inside brackets in the LESS would be calculated by LESS first. So I had to parse the calc as Escape string for LESS, like:

.post {
    width: ~"calc(100% 0 @asideWidth)";

That also failed, reason being anything inside that Escape string would not be evaluated. So I had to to remove the variable and use actual number.

.post {
    width: ~"calc(100% - 30px)";

And all passed.

2 Responses
Add your response


The Calc() issue has since been fixed, but not sure if its in the current release. I suspect it is.

To use a variable in a string:

~"calc(100% @{asideWidth})"

over 1 year ago ·

For those still interested, in the most current release you now do:

width: calc(~"100% - " @variable);

over 1 year ago ·