Un truco puro y opcional con valores de propiedad personalizados trucos CSS

Imagina que tienes un elemento con una propiedad CSS de varios valores, como transform: valores opcionales de propiedades personalizadas:

.el {
  transform: translate(100px) scale(1.5) skew(5deg);
}

Ahora imagina que no lo estás haciendo. siempre quiero todo transform valores a aplicar, por lo que algunos son opcionales. Es posible que desee considerar valores opcionales para las propiedades CSS personalizadas:

.el {
  /*         |-- default ---| |-- optional --| */
  transform: translate(100px) var(--transform);
}

Pero, sorprendentemente, el uso de valores opcionales de propiedades personalizadas como esta no funciona como se esperaba. --transform es variable No define que no se aplicará toda la propiedad. Tengo un pequeño "truco" para arreglar esto y se ve así:

.el {
  transform: translate(100px) var(--transform, );
}

¿Notas la diferencia? Allí se define una opción de copia de seguridad. establecer en un valor vacío: (, )

¡Este es el truco y es muy útil! esto es lo que especificaciónidentificación debo decir:

Excepto por las reglas usuales de eliminación de comas, que requieren la omisión de comas cuando no separan valores, una coma simple, sin nada después, debe ser tratada como válida en var()que muestra un valor de reserva vacío.

Esto está algo espiritualmente relacionado con el truco de cambio de propiedad personalizada de CSS, que aprovecha una propiedad personalizada con el valor de espacio vacío.

Demostración

Como dije, esto es útil y funciona para cualquier propiedad CSS con muchos valores. La siguiente demostración lo muestra usando text-shadow, backgroundy filter Además de transform un ejemplo que acabamos de discutir.

mira la pluma
CSS var - Retroceso a nada de Yair Even O (@vsync) Sobre CódigoPen.

Algunas propiedades que toman múltiples valores, como text-shadowrequieren un tratamiento especial ya que solo funcionan con un separador de coma. En aquellos casos en los que se define la propiedad personalizada de CSS, usted (como autor del código) sabe que solo debe usarse en una situación en la que el valor ya está definido, cuando se usa una propiedad personalizada. A continuación, debe insertar una coma directamente en la propiedad personalizada antes del primer valor, de la siguiente manera:

--text-shadow: ,0 0 5px black;

Esto, por supuesto, dificulta la posibilidad de utilizar esta variable en lugares donde es el único valor de una propiedad. Sin embargo, esto se puede resolver creando "capas" de variables con fines de abstracción, es decir. la propiedad personalizada apunta a un nivel inferior de propiedades personalizadas.

Cuidado con el compilador Sass

Mientras investigamos este truco, encontramos un error en el compilador Sass que elimina el valor vacío (,) una opción de copia de seguridad que contradice la especificación. informé el error y espero que se mejore pronto.

Como solución temporal, se puede utilizar una opción de copia de seguridad que no provoque el renderizado, como por ejemplo:

transform: translate(100px) var(--transform, scale(1));