How to prevent Less from trying to compile CSS calc() properties?
Solution 1
Less no longer evaluates expression inside calc
by default since v3.00
.
Original answer (Less v1.x...2.x
):
Do this:
body { width: calc(~"100% - 250px - 1.5em"); }
In Less 1.4.0 we will have a strictMaths
option which requires all Less calculations to be within brackets, so the calc
will work "out-of-the-box". This is an option since it is a major breaking change. Early betas of 1.4.0 had this option on by default. The release version has it off by default.
Solution 2
A very common usecase of calc is take 100% width and adding some margin around the element.
One can do so with:
@someMarginVariable = 15px;
margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
Solution 3
There is several escaping options with same result:
body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
Solution 4
There's a tidier way to include variables inside the escaped calc, as explained in this post: CSS3 calc() function doesn't work with Less #974
@variable: 2em;
body{ width: calc(~"100% - @{variable} * 2");}
By using the curly brackets you don't need to close and reopen the escaping quotes.
Nick Babcock
Updated on July 08, 2021Comments
-
Nick Babcock almost 3 years
The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating
body { width: calc(100% - 250px - 1.5em); }
into
body { width: calc(-151.5%); }
Which is obviously not desired. I'm wondering if there is a way to signal to the Less compiler to essentially ignore the attribute during compilation. I've searched through the Less documentation and both compilers' documentation, and I could not find anything.
Does Less or a Less compiler support this?
If not, is there a CSS extender that does?
-
Attila Fulop over 11 yearsNote that if you're compiling less with twitter's recess it ignores this escaping. At least at the time of writing this comment.
-
Brian M. Hunt almost 11 yearsI just tried
calc(100% - 50px)
in less.css 1.4.0 and the result wascalc(50%)
. The awesome~"..."
trick continues to work, but I am confused by the "out-of-the-box" statement, which makes me think the above would work. Luke, how does support forcalc
change in Less 1.4.0? Thanks! -
mpen over 10 yearsThe question is why did less.js attempt to compute this in the first place? It should throw an error for "100% - 250px" as it can't compute a sensible answer.
-
mpen over 10 yearsUpdate: I see there's a
--strict-units
option which prevents these kinds of errors. Awesome! -
tastybytes over 10 yearsDoes this still work? I'm when trying with
calc(~"100% + 20px");
the compiled css iscalc(120%);
note: I am using grunt to build the less and js files -
0b10011 over 9 yearsFor future readers, you can also escape just the operator, enabling you to use variables as well. Example:
calc(@somePercent ~"-" @someLength)
-
another over 7 years
-o-calc-
is not supported yet.