CODEWITHSUNDEEP
csscompilationlesscss-calc
Nick Babcock
Nick Babcock

Reputation: 6141

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

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?

Upvotes: 357

Views: 154462

Answers (5)

Sonia Verma
Sonia Verma

Reputation: 77

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

Upvotes: 1

brohr
brohr

Reputation: 636

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.

Upvotes: 11

Luke Page
Luke Page

Reputation: 8186

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.

Upvotes: 556

Sebastien Lorber
Sebastien Lorber

Reputation: 92200

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

Upvotes: 39

Juraj
Juraj

Reputation: 6648

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

Upvotes: 34

Related Questions