Last Updated: August 11, 2022
·
100.7K
· 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.

3 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 ·

Hej vänner, jag vill utöka mina kunskaper om kodning lite, kan ni ge mig råd om vad jag bör läsa eller kanske titta på några videor på youtube. Tack på förhand

over 1 year ago ·