You can escape the calc arguments in order to prevent them from being evaluated on compilation.
Using your example, you would simply surround the arguments, like this:
calc(~'100% - 10px')
Demo : http://jsfiddle.net/c5aq20b6/
I find that I use this in one of the following three ways:
Everything inside the calc arguments is defined as a string, and is totally static until it's evaluated by the client:
div {
> span {
width: calc(~'100% - 10px');
}
}
div > span {
width: calc(100% - 10px);
}
You can insert a LESS variable into the string:
div {
> span {
@pad: 10px;
width: calc(~'100% - @{pad}');
}
}
div > span {
width: calc(100% - 10px);
}
You may want to escape a percentage value, but go ahead and evaluate something on compilation:
@btnWidth: 40px;
div {
> span {
@pad: 10px;
width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
}
}
div > span {
width: calc((100% - 10px) - 80px);
}
Source: http://lesscss.org/functions/#string-functions-escape.