Disable LESS-CSS Overwriting calc()

Right Now I’m trying to do this in CSS3 in my LESS code:

width: calc(100% - 200px);

However, when LESS compiles it is outputting this:

width: calc(-100%);

Is there a way to tell LESS not to compile it in that manner and to output it normally?



Word Interop Disable Overwriting While Saving

I am trying to export some text from RichTextBox to a word application. I got things figured out for the most part, but I cannot figure how to disable the overwrite feature if the filename is the same

Web Essentials 2013 bug while compiling calc() property in LESS

I’m using Web Essentials 2013 in Visual Studio 2013, and when I use calc() property in LESSCSS it compiles it incorrectly. Let’s see: So, it must compile it as is and must not do math calculations in

LESSCSS – Variable not set

I use LESSCSS for CSS files. I’m having a problem with that variables in some cases are not set correctly. Code in LESSCSS @index: 10; [data-grid*=’[email protected]{index}’] > * { background: red; } Informa

Loading LessCSS with jQuery

I am loading LessCSS from Google Code with jQuery, and want to access LessCSS’ Parser() object by using less.Parser. I can make this load LessCSS w/ jQuery by hacking in a <link rel> tag in <

LESSCSS and @keyframes

Has anyone had issues with LESSCSS and @keyframes or @-ms-keyframes? It compiles the CSS fine for @-webkit-keyframes, @-moz-keyframes and @-o-keyframes.

compiling lesscss files by phantomJS

hej I got idea to compile lesscss files while building my project with maven. looking at lesscss site it is possible to compile those files referencing them in head section of html file like this <

Convert CSS to LessCss

There are plenty of LessCss to CSS converters out there but are there any decent ones that go in reverse? I would like to take my CSS and have it make nested rules without having to manually do them.

lesscss print style

I want using lesscss for print, but it seems, the browser don’t recongize the @media print, since I don’t want embbed <link rel=stylesheet/css type=text/css href=themes/css/print.css media=

lesscss escape expression

I`m using LessCSS, java, and colorbox. Colorbox has a css file. One of the styles is as follow: .cboxIE6 #cboxMiddleRight { _behavior: expression(this.src = this.src ? this.src : this.currentStyle.bac

LessCss and css imports

I’m trying to integrate LessCSS (version 1.0.41) with Blueprint but it seems that I can’t import css files in my less stylesheet. So I tried a simpler import: .red { color: red; } and put it in test

Answers

Using an escaped string (a.k.a. escaped value):

width: ~"calc(100% - 200px)";

Also, in case you need to mix Less math with escaped strings:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

Compiles to:

width: calc(100% - 15rem + 15px + 2em);

This works as Less concatenates values (the escaped strings and math result) with a space by default.

Apart from using an escaped value as described in my other answer, it is also possible to fix this issue by enabling the Strict Math setting.

With strict math on, only maths that are inside unnecessary parentheses will be processed, so your code:

width: calc(100% - 200px);

Would work as expected with the strict math option enabled.

However, note that Strict Math is applied globally, not only inside calc(). That means, if you have:

font-size: 12px + 2px;

The math will no longer be processed by Less — it will output font-size: 12px + 2px which is, obviously, invalid CSS. You’d have to wrap all maths that should be processed by Less in (previously unnecessary) parentheses:

font-size: (12px + 2px);

Strict Math is a nice option to consider when starting a new project, otherwise you’d possibly have to rewrite a good part of the code base. For the most common use cases, the escaped string approach described in the other answer is more suitable.

The solutions of Fabricio works just fine.

A very common usecase of calc is add 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);
width: -o-calc(~"100% - "@someMarginVariable*2);

Or can use a mixin like:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@[email protected])*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

Here’s a cross-browser less mixin for using CSS’s calc with any property:

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

Example usage:

.calc(width; "100% - 200px");

And the CSS that’s output:

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

A codepen of this example: http://codepen.io/patrickberkeley/pen/zobdp

Example for escaped string with variable:

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

compiles to

div {
    height: calc(100vh - 10px );
}