Comstackción menos agresiva con CSS3 calc

Los comstackdores Less que estoy usando ( OrangeBits y dotless 1.3.0.5 ) se están traduciendo agresivamente

body { width: calc(100% - 250px - 1.5em); } 

dentro

 body { width: calc(-151.5%); } 

Lo cual obviamente no es deseado. Me pregunto si hay una forma de indicarle al comstackdor Less que esencialmente ignore el atributo durante la comstackción. He buscado en la documentación de Less y en la documentación de ambos comstackdores y no pude encontrar nada.

¿Soporta menos o menos comstackdor esto?

Si no, ¿hay un extensor de CSS que lo haga?

Menos ya no evalúa la expresión dentro de calc por defecto desde v3.00 .


Respuesta original ( Less v1.x...2.x ):

Hacer esto:

 body { width: calc(~"100% - 250px - 1.5em"); } 

En Less 1.4.0 tendremos una opción strictMaths que requiere que todos los cálculos Less estén dentro de los paréntesis, por lo que el cálculo funcionará “out-of-the-box”. Esta es una opción ya que es un gran cambio radical. Las versiones beta iniciales de 1.4.0 tenían esta opción activada de forma predeterminada. La versión de lanzamiento lo tiene desactivado por defecto.

Un uso muy común de calc es tomar un ancho del 100% y agregar un margen alrededor del elemento.

Uno puede hacerlo con:

 @someMarginVariable = 15px; margin: @someMarginVariable; width: calc(~"100% - "@someMarginVariable*2); width: -moz-calc(~"100% - "@someMarginVariable*2); width: -webkit-calc(~"100% - "@someMarginVariable*2); 

Hay varias opciones de escape con el mismo resultado:

 body { width: ~"calc(100% - 250px - 1.5em)"; } body { width: calc(~"100% - 250px - 1.5em"); } body { width: calc(100% ~"-" 250px ~"-" 1.5em); } 

Sé que esto es antiguo, pero hay una manera más ordenada de incluir variables dentro del cálculo escapado, como se explica en esta publicación: https://github.com/less/less.js/issues/974

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

Al usar los corchetes, no necesita cerrar y volver a abrir las comillas de escape.