Tengo mi código con una variable CSS, llamémoslo --element-padding, que permite múltiples valores como 8px 0 12px 79px , esta variable está en un componente web que poseo y está siendo utilizado por terceros.
Y lo uso en mi componente web CSS
padding: var(--element-padding, '0');Esta variable permite a mis usuarios anular el relleno al declararlo al diseñar mi componente
.awesome-component { --element-padding: 8px 0 12px 79px; }Ahora descubrí que necesitaría procesarlo, porque solo necesito el acolchado superior para otro estilo.
Una opción sería cambiar --element-padding a 4 variables diferentes
--element-padding-top --element-padding-right --element-padding-bottom --element-padding-leftPero luego, los usuarios tendrán que cambiar su código para adaptarse a las nuevas variables, causando muchos problemas.
¿Hay alguna forma de obtener esta variable y hacer algún tipo de cálculo de división antes de usarla en la función CSS var()? de esa manera puedo obtener la primera posición de la variable, sin necesidad de decirle a los usuarios que cambien su implementación.
(El código y la explicación es uno simplificado que no se ajusta al caso real, pero el punto es dividir una variable que contiene 4 medidas en 4 variables diferentes, sin la necesidad de agregar/modificar variables en el lado del usuario/raíz)
Respuesta original al final 👇🏻👇🏻👇🏻
Creo que entiendo que desea permitir que sus consumidores continúen usando la variable CSS --element-padding y desea derivar los valores individuales superior/derecho/inferior/izquierdo a partir de los cuales pueden personalizar --element-padding pero usted vamos a utilizar las propiedades individuales en su desarrollo en el futuro.
Puedes leer las variables CSS:
getComputedStyle(document.documentElement).getPropertyValue('--element-padding')Y establecerlos:
document.documentElement.style.setProperty('--element-padding-top', '8px')Poniendolo todo junto:
const updatePadding = () => { let elementPadding = getComputedStyle(document.documentElement) .getPropertyValue('--element-padding'); // "8px 0 12px 79px"; let [top, right, bottom, left] = elementPadding.trim().split(/\s+/); const docStyle = document.documentElement.style; docStyle.setProperty('--element-padding-top', top); docStyle.setProperty('--element-padding-right', right); docStyle.setProperty('--element-padding-bottom', bottom); docStyle.setProperty('--element-padding-left', left); }; updatePadding(); :root { --element-padding: 8px 0 12px 79px; /* Default values but will overridden by updatePadding() */ --element-padding-top: 8px; --element-padding-right: 0; --element-padding-bottom: 12px; --element-padding-left: 79px; }RESPUESTA ORIGINAL
Deberías pensar al revés. En lugar de dividir --element-padding ¿por qué no declarar las variables individuales y luego usarlas para crear la variable CSS todo en uno?
::root { --element-padding-top: 8px; --element-padding-right: 0; --element-padding-bottom: 12px; --element-padding-left: 79px; --element-padding: var(--element-padding-top) var(--element-padding-right) var(--element-padding-bottom) var(--element-padding-left); }Todavía puede usar la variable original como lo hizo anteriormente.
padding: var(--element-padding, '0');Una cosa clave a tener en cuenta aquí es que las propiedades personalizadas de CSS pueden hacer referencia a otras propiedades personalizadas de CSS :
Ejemplo:
:root { --element-padding-top: 8px; --element-padding: var(--element-padding-top) 0 12px 79px; } .element1 { padding: var(--element-padding, '0'); } .element2 { padding-top: var(--element-padding-top); }Puede utilizar valores predeterminados. Si los que usan su componente no han establecido los valores, no hay problema, pero les da la oportunidad de declararlos si así lo desean.
:host { --element-padding: 20px; padding: var(--element-padding-top, var(--element-padding)) var(--element-padding-right, var(--element-padding)) var(--element-padding-bottom, var(--element-padding)) var(--element-padding-left, var(--element-padding)); }La desventaja es que probablemente no puedan declarar el relleno como un conjunto de números.