funciona - css calc height based on width

función calc() dentro de otro calc() en CSS

Question

¿Cómo uso una función de cálculo CSS dentro de otra función de cálculo CSS? Según este post es posible pero no hay ningún ejemplo de eso.

Answer 1

Es posible usar calc () dentro de otro calc ().

Un ejemplo:

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}

Actualización sobre cálculos anidados con variables css:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

Después de expandir todas las variables, el valor de widthC será calc (calc (100px / 2) / 2), luego, cuando se asigna a la propiedad width de .foo, todos los calc () internos (sin importar cuán profundamente anidados) serán aplanados a solo paréntesis , por lo que el valor de la propiedad de ancho será finalmente calc ((100px / 2) / 2), es decir, 25px. En resumen: un calc () dentro de un calc () es idéntico a solo paréntesis.

Por lo tanto, la especificación actual también demuestra que el uso de paréntesis dentro de calc () está anidado.

Aprenda más sobre las variables css here .

Answer 2

La referencia que citaste es ciertamente un poco confusa.

No es posible utilizar una función de calc dentro de otro calc .

De las especificaciones aquí: http://dev.w3.org/csswg/css-values/#calc-notation

... Los componentes de una expresión calc () pueden ser valores literales, expresiones attr () o calc (), o valores ..

Puede tener la expresión calc dentro de las expresiones, pero no la función calc() sí misma.

Y se da un ejemplo en esa referencia para expresiones anidadas:

width: calc(100%/3 - 2*1em - 2*1px);

Y también para calc múltiples para múltiples propiedades:

margin: calc(1rem - 2px) calc(1rem - 1px);

La sintaxis de la especificación anterior:

La sintaxis de una función calc () es:

<calc()> = calc( <calc-sum> ) 
<calc-sum> = <calc-product> [ [ ''+'' | ''-'' ] <calc-product> ]* 
<calc-product> = <calc-value> [ ''*'' <calc-value> | ''/'' <number> ]* 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) 

Donde una <dimensión> es una dimensión.

Además, se requieren espacios en blanco en ambos lados de los operadores + y -. (Los operadores * y / pueden usarse sin espacios en blanco alrededor de ellos).

Las UA deben admitir expresiones calc () de al menos 20 términos, donde cada NÚMERO, DIMENSIÓN o PORCENTAJE es un término. Si una expresión calc () contiene más del número de términos admitidos, debe tratarse como si no fuera válida.

.

Answer 3

Soy uno de los editores de la especificación de Valores y Unidades, que define calc ().

calc () debe encajar dentro de calc (). Hubo un descuido en la gramática / definiciones por un tiempo que técnicamente no lo permitía, pero recientemente lo arreglé. Las implementaciones no se han puesto al día todavía, que yo sepa (aunque parece que Chrome 51 y Firefox 48 tendrán esto arreglado, ¡woo!).

Dicho esto, hay una razón cero para anidar las expresiones calc () normalmente, son exactamente idénticas a solo usar paréntesis. La única razón para hacerlo es cuando se usan propiedades / variables personalizadas.