funciona - propiedad calc css

Compilación menos agresiva con CSS3 calc.

Question

Los Less compiladores que estoy usando ( OrangeBits y 1.3.0.5 sin punto ) están traduciendo agresivamente

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

dentro

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

Lo que obviamente no se desea. Me pregunto si hay una manera de indicar al compilador Less que esencialmente ignore el atributo durante la compilación. Busqué en la documentación de Less y en la documentación de ambos compiladores, y no pude encontrar nada.

¿Menos o menos compilador soporta esto?

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

Answer 1

Hay una forma más ordenada de incluir variables dentro del cálculo de escape, como se explica en esta publicación: la función calc () de CSS3 no funciona con Less # 974

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

Al utilizar los corchetes, no es necesario cerrar y volver a abrir las comillas de escape.

Answer 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); }

Answer 3

Less 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 de Less estén entre paréntesis, por lo que el cálculo funcionará " strictMaths para usar". Esta es una opción ya que es un cambio importante. Las betas iniciales de 1.4.0 tenían esta opción activada por defecto. La versión de lanzamiento lo tiene desactivado por defecto.

Answer 4

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