Deshabilitar la sobrescritura LESS-CSS calc ()

Ahora mismo trato de hacer esto en CSS3 en mi código LESS:

width: calc(100% - 200px); 

Sin embargo, cuando LESS comstack está produciendo esto:

 width: calc(-100%); 

¿Hay alguna manera de decirle a LESS que no compile de esa manera y que lo emita normalmente?

Usar una cadena escapada (también conocida como valor escapado):

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

Además, en caso de que necesite mezclar menos matemáticas con cadenas escapadas:

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

Comstack para:

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

Esto funciona como Menos concatena valores (las cadenas escapadas y el resultado matemático) con un espacio predeterminado.

Además de usar un valor escapado como se describe en mi otra respuesta , también es posible solucionar este problema activando la configuración de Strict Math .

Con la matemática estricta activada, solo se procesarán las matemáticas que estén dentro de paréntesis innecesarios, por lo que su código:

 width: calc(100% - 200px); 

Funcionaría como se esperaba con la opción matemática estricta habilitada.

Sin embargo , tenga en cuenta que Strict Math se aplica globalmente, no solo dentro de calc() . Eso significa, si tienes:

 font-size: 12px + 2px; 

Las matemáticas ya no serán procesadas por Less, sino que generarán font-size: 12px + 2px , que obviamente no es CSS válido. Tendría que ajustar todas las matemáticas que deberían ser procesadas por Less en paréntesis (previamente innecesarios):

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

Strict Math es una buena opción para considerar al iniciar un nuevo proyecto, de lo contrario posiblemente tenga que reescribir una buena parte de la base de código. Para los casos de uso más comunes, el enfoque de cadena escapada descrito en la otra respuesta es más adecuado.

Aquí hay un mixin de navegador cruzado para usar calc de CSS con cualquier propiedad:

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

Ejemplo de uso:

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

Y el CSS que sale:

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

Un codepen de este ejemplo: http://codepen.io/patrickberkeley/pen/zobdp

Ejemplo de cadena escapada con variable:

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

comstack a

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

Las soluciones de Fabricio funcionan bien.

Un uso muy común de calc es agregar 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); width: -o-calc(~"100% - "@someMarginVariable*2); 

O puede usar un Mixin como:

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