CSS calc (): multiplicación y división con valores unitarios

Solución:

En la división CSS calc (), 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).

Para alguien que está cometiendo un error como yo, no olvides que no puedes usar variables sass en css calc función directamente, para eso tienes que usar el método de cálculo sass

$test: 10px;

.testing{
    width: #{$test * 2};
}

o si aún es necesaria la implementación de calc

$test: 10px;

.testing{
  width: calc(50% + #{$test * 2});  // results in calc(50% - 20px)
}

---

---

Utiliza Nuestro Buscador