Calcula un valor proporcional a partir de una base de referencia y devuelve el resultado con la unidad indicada.
Es útil para convertir medidas de diseño a unidades fluidas como vw, manteniendo una relación respecto a una base de referencia.
@function bp($attr: ());| Clave | Tipo | Default | Descripción |
|---|---|---|---|
| base | b | Number | 1920 | Define la base de referencia sobre la que se calcula la proporción. |
| unit | u | String | "vw" | Define la unidad que se concatenará al resultado final. |
| value | v | Number | 0 | Define el valor que se convertirá en una medida proporcional. |
El cálculo se realiza con la fórmula (value * 100) / base y luego se concatena la unidad indicada en unit. Por ejemplo, con (base: 1920, value: 384, unit: "vw") el resultado será 20vw.
La barra roja recibe un ancho calculado con value: 384 y base: 1920. La función determina que 384 equivale al 20 % de la base y genera width: 20vw; por eso, la barra ocupa siempre una quinta parte del ancho de la ventana, incluso cuando cambia el tamaño del navegador.
<div class="fn_bp"></div>