yyou-q
Last Updated: February 25, 2016
·
19.45K
· shekhardesigner
Pppp

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.

Say Thanks
Respond

2 Responses
Add your response

8039
09caa4a26a5e57031146b5e06b4d7a8c

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 ·
16274
E8b1c1c307172a779de0c6359950256a

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

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

over 1 year ago ·