How to prevent Less from trying to compile CSS calc() properties?

Question

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?

I am very sure too, to want the compiler be more aggressive! (the double negation in the previous comment confused me ;) ) (so my vote as well for the nice feature below) — Andreas Covidiot
– Andreas Covidiot, Commented Jan 8, 2015 at 23:53

seven-phases-max · Accepted Answer · 2018-03-27 01:48:46Z

556

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.

edited Mar 27, 2018 at 1:48

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

answered Aug 15, 2012 at 16:35

Luke Page

8,1861 gold badge24 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Attila Fulop Over a year ago

Note 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 Over a year ago

I just tried calc(100% - 50px) in less.css 1.4.0 and the result was calc(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 for calc change in Less 1.4.0? Thanks!

mpen Over a year ago

The 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 a year ago

Update: I see there's a --strict-units option which prevents these kinds of errors. Awesome!

0b10011 Over a year ago

For future readers, you can also escape just the operator, enabling you to use variables as well. Example: calc(@somePercent ~"-" @someLength)

|

Sebastien Lorber · Accepted Answer · 2016-08-08 08:11:23Z

39

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);

edited Aug 8, 2016 at 8:11

answered Jun 11, 2014 at 15:24

Sebastien Lorber

92.6k76 gold badges302 silver badges430 bronze badges

1 Comment

roizpi Over a year ago

-o-calc- is not supported yet.

Juraj · Accepted Answer · 2015-10-20 10:41:28Z

34

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); }

edited Oct 20, 2015 at 10:41

answered Oct 19, 2015 at 20:30

Juraj

6,7685 gold badges60 silver badges57 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2018-11-03 16:13:59Z

11

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.

edited Nov 3, 2018 at 16:13

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 19, 2017 at 20:39

brohr

6357 silver badges13 bronze badges

Comments

Sonia Verma · Accepted Answer · 2023-03-01 17:50:10Z

1

@variable: 2em;

body{ 
    width: ~"calc(100% - @{variable} * 2)";
}

Reference: Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)";

answered Mar 1, 2023 at 17:50

Sonia Verma

775 bronze badges

Collectives™ on Stack Overflow

How to prevent Less from trying to compile CSS calc() properties?

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related