less escaping seems to be broken

There is a problem with grunt-recess in that less escaping seems to be broken. See: https://github.com/twitter/recess/issues/59

In summary, using the .less file below

.carousel-inner {
  width: 83%;
  width: ~"calc(100% - 71px)";
  width: ~"-webkit-calc(100% - 71px)";
  width: -moz-calc(~"100% - 71px");
  width: -o-calc(~"100% - 71px");
}

results in css:

.carousel-inner {
  width: 83%;
  width: calc(29%);
  width: -webkit-calc(29%);
  width: -moz-calc(29%);
  width: -o-calc(29%);
}

less should however “pass through” all the parts escaped by ~“”

This is the wrong place to request a fix for this bug, but was there any reason behind the design choice of using grunt-recess vs. grunt-contrib-less? I’m thinking of switching my local copy of ng-boilerplate to use grunt-contrib-less and submitting a PR.

[iulianmihai]

For everyone who is interested, I found the following solution:

height: ~"(calc(~'100%' - ~'116px'))";

output:

height: calc(100% - 116px);

The reason I’m not using grunt-contrib-less is because I can not import less files in other less files.

[Marlywoos]

@iulianmihai Your solution is perfect! Tks