Compilación menos agresiva con CSS3 calc

336

Los compiladores Less que estoy usando ( OrangeBits y dotless 1.3.0.5 ) 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 manera de indicarle al compilador Less que esencialmente ignore el atributo durante la compilación. He buscado en la documentación de Less y en la documentación de ambos compiladores, y no pude encontrar nada.

¿El compilador Less or a Less lo admite?

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

css compilation less css-calc Nick Babcock
fuente
99
¿Estás seguro de que no quieres un compilador menos agresivo?
fiatjaf
¡También estoy muy seguro de querer que el compilador sea más agresivo! (la doble negación en el comentario anterior me confundió)) (así que mi voto también por la buena característica a continuación)
Andreas Dietrich

Respuestas:

530

Menos ya no evalúa la expresión dentro calcde forma predeterminada desde entonces 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 strictMathsopción que requiere que todos los cálculos de Less estén entre paréntesis, por lo calcque funcionará "fuera de la caja". Esta es una opción ya que es un cambio importante. Las primeras versiones beta de 1.4.0 tenían esta opción activada por defecto. La versión de lanzamiento lo tiene desactivado por defecto.

Luke Page
fuente
2
Tenga en cuenta que si está compilando menos con el receso de Twitter, ignora este escape . Al menos al momento de escribir este comentario.
Attila Fulop el
1
Acabo de probar calc(100% - 50px)en less.css 1.4.0 y el resultado fue calc(50%). El ~"..."truco increíble sigue funcionando, pero estoy confundido por la declaración "lista para usar", que me hace pensar que lo anterior funcionaría. Luke, ¿cómo funciona el soporte para el calccambio en Less 1.4.0? ¡Gracias!
Brian M. Hunt
2
La pregunta es ¿por qué less.js intentó calcular esto en primer lugar? Debería arrojar un error para "100% - 250px" ya que no puede calcular una respuesta sensata.
mpen
72
Para futuros lectores, también puede escapar solo del operador, lo que le permite usar variables también. Ejemplo:calc(@somePercent ~"-" @someLength)
0b10011
10
En lugar de calcular menos mal esto o lanzar un error, ¿por qué no puede darse cuenta de lo que el usuario está tratando de hacer y dejarlo en paz? Obviamente, un porcentaje y un valor de píxel no se pueden calcular juntos en menos.
dfmiller
37

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);
Sebastien Lorber
fuente
-o-calc- Todavía no está implementada .
otro
28

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); }
icl7126
fuente
9

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

@variable: 2em;

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

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

brohr
fuente