funciona - CSS calc()-Multiplicación y división con valores unitarios

css calc vh

Question

¿Es posible usar calc () para multiplicar o dividir con valores basados ​​en unidades (como 100%, 5px, etc.)?

Por ejemplo esperaba hacer algo como esto:

width: calc(100% * (.7 - 120px / 100%));

Esperando que se resolviera a algo como (asumiendo que 100% = 500px):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

Sin embargo, después de algunos experimentos parece que no puedo tener un valor basado en unidades como el denominador para la división.

También parece que no puedo multiplicar dos valores juntos como 5px * 10px o 5px * 100% .

Sé que no tiene sentido en el 100% de los casos permitir esto, pero en mi caso de uso, me gustaría saber qué porcentaje de 120px es del ancho total, que luego comparto con el resto de mi cálculo.

O eso, o si alguien pudiera encontrar una forma diferente de escribirlo, eso también funcionaría. He destrozado mi cerebro y no pude encontrar nada.

Answer 1

En CSS calc () division - el lado derecho debe ser un <number> por lo tanto, los valores basados ​​en unidades no se pueden usar en una división como esta.

También tenga en cuenta que en la multiplicación al menos uno de los argumentos debe ser un número.

El MDN tiene una gran documentación sobre esto.

Si desea una mejor manera de hacer cálculos, puede usar un preprocesador (me gusta Sass ). Ese enlace lo llevará a sus guías (en esa página hay una sección sobre operadores).