Imagina que tienes un elemento con una propiedad CSS de varios valores, como transform: valores de propiedad personalizados opcionales:
.el { transform: translate(100px) scale(1.5) skew(5deg);
}Ahora imagina que no hacerlo quiero todo el transform valores a aplicar, por lo que algunos son opcionales. Puede pensar en valores de propiedad personalizados opcionales de CSS:
.el { /* |-- default ---| |-- optional --| */ transform: translate(100px) var(--transform);
}
Pero, sorprendentemente, el uso de valores de propiedad personalizados opcionales como este no funciona según lo previsto. Si el --transform variable es no definida toda la propiedad no se aplicará. Tengo un pequeño "truco" para arreglar esto y se ve así:
.el { transform: translate(100px) var(--transform, );
}¿Notas la diferencia? Hay un respaldo definido allí que es establecer en un valor vacío: (, )
¡Ese es el truco, y es muy útil! Esto es lo que la especificaciónificación tiene que decir:
En una excepción a las reglas habituales de elisión de comas, que requieren que se omitan las comas cuando no están separando valores, una coma simple, sin nada que la siga, debe tratarse como válida en
var(), que indica un valor de reserva vacío.
Esto está algo espiritualmente relacionado con el El truco de alternancia de propiedades personalizadas de CSS que aprovecha una propiedad personalizada que tiene el valor de un espacio vacío.
De demostración
Como dije, esto es útil y funciona para cualquier propiedad CSS de varios valores. La siguiente demostración lo muestra usando text-shadow, backgroundy filter además de transform ejemplo que acabamos de discutir.
Vea la pluma
CSS var – Retroceder a nada de Yair Even O (@vsync)
on CodePen.
Algunas propiedades que aceptan múltiples valores, como text-shadow, requieren un tratamiento especial porque solo funcionan con un delimitador de coma. En esos casos, cuando se define la propiedad personalizada de CSS, usted (como autor del código) sabe que solo se debe usar en una situación en la que ya se definió un valor donde se usa la propiedad personalizada. Luego se debe insertar una coma directamente en la propiedad personalizada antes del primer valor, así:
--text-shadow: ,0 0 5px black;Esto, por supuesto, inhibe la capacidad de usar esta variable en lugares donde es el único valor de alguna propiedad. Sin embargo, eso se puede resolver creando "capas" de variables con fines de abstracción, es decir, la propiedad personalizada apunta a propiedades personalizadas de nivel inferior.
Cuidado con el compilador Sass
Mientras exploraba este truco, descubrió un error en el compilador Sass que elimina el valor vacío (,) alternativa, que va en contra de la especificación. he informado del error y espero que se arregle pronto.
Como solución temporal, se puede utilizar una alternativa que no provoque renderizado, como por ejemplo:
transform: translate(100px) var(--transform, scale(1));
