Disable LESS-Sobrescribir CSS calc () [duplicar]

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 Strict Math.

Con matemáticas estrictas activadas, 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 la Matemática Estricta se aplica globalmente, no solo dentro de calc(). Eso significa, si usted tienen:

font-size: 12px + 2px;

La matemática ya no será procesada por Less will producirá font-size: 12px + 2px que es, obviamente, CSS no válido. Tendrías que envolver 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 a considerar al iniciar un nuevo proyecto, de lo contrario, posiblemente tendría que reescribir una buena parte del código base. 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 menos para usar CSS calc 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 es la salida:

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 para cadena de escape con variable:

@some-variable-height: 10px;

...

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

Compila a

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

Las soluciones de Fabricio funcionan bien.

Un caso de uso muy común de calc es agregar 100% de ancho y agregar algún 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);
}