Deshabilitar LESS-CSS Overwriting calc()

css3 css-calc

Question

Esta pregunta ya tiene una respuesta aquí:

• Compilación menos agresiva con CSS3 calc 4 respuestas

Ahora mismo estoy tratando de hacer esto en CSS3 en mi código MENOS:

width: calc(100% - 200px);

Sin embargo, cuando LESS compila está dando salida a esto:

width: calc(-100%);

¿Hay una manera de decirle a LESS que no lo compile de esa manera y que lo genere normalmente?

Answer 1

Además de usar un valor de escape como se describe en mi otra respuesta , también es posible solucionar este problema habilitando la configuración de Matemáticas estrictas .

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 es, obviamente, CSS no válido. Tendría que envolver todos los cálculos matemáticos que deberían procesarse con menos paréntesis (anteriormente 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 volver a escribir 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.

Answer 2

Aquí hay una combinación de varios navegadores para usar el 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 se imprime:

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

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

Answer 3

Ejemplo para cadena escapada con variable:

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

compila a

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

Answer 4

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 una mezcla 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);
}

Answer 5

Usando una cadena de escape (también conocido como valor de escape):

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

Además, en caso de que necesites mezclar Less math con cadenas escapadas:

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

Compila a:

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

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