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.
Written by Shekhar Sharma
Related protips
3 Responses
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})"
For those still interested, in the most current release you now do:
width: calc(~"100% - " @variable);
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