A menudo me he encontrado utilizando propiedades personalizadas de CSS (también conocidas como variables CSS) para trabajar con valores de color, especialmente al crear temas oscuros. Mi objetivo al trabajar con colores en la web ha sido definir una paleta de colores central y limitada, y luego usar variaciones de tonos más claros u oscuros de esos colores principales en toda mi hoja de estilo.
Recuerdo la primera vez que probé Sass en un proyecto. Lo primero que quise hacer fue convertir mis colores en variables.
El Desafío de las Variantes de Color
El problema es que esos colores principales son opacos y sólidos. Esto no se siente bien. ¿Diez variantes para cada color principal? Eso podría resultar en hasta cincuenta "variables" de color. No parece mucho una variable, ¿verdad?
No soy una máquina y no puedo traducir de RGB a HEX en mi cerebro. ¿Cómo sabrías que esos son realmente el mismo color, solo expresados en la sintaxis de diferentes modelos de color? Probablemente sea seguro asumir que son los mismos colores, pero la ambigüedad está ahí. Obviamente, podrías simplemente añadir un comentario. Creo que eso hace un poco más obvio lo que está sucediendo. Dicho esto, comencé a escribir mis colores en la web en HEX, así que soy mucho más fluido en la comprensión de un color al verlo en HEX.
El único problema es que tengo que usar Sass.
Lea también: IVA 21% Excel
La Solución Flexible: Propiedades Personalizadas con RGB/RGBA
Como puedes ver, declaro un color sólido para mi variable, pero tengo que envolverlo en la sintaxis rgb o rgba para usarlo, con o sin opacidad. Esto es un poco fastidioso. Estoy usando tu truco para usar propiedades personalizadas de CSS para el color + rgba. ¡Funciona de maravilla, gracias! Esto fue increíblemente útil porque pude generar cualquier tono de un color principal que necesitara, dependiendo de mi caso de uso contextual. Me encuentro configurando variables HEX y RGB... De esa manera no siempre tengo que usar rgba, si solo necesito el valor HEX. ¡Es así de simple!
Integración con Sass y Bibliotecas de Componentes
En uno de mis casos de uso particulares, esto me resultó útil porque en Insight estamos desarrollando una biblioteca de componentes con un framework CSS, pero los estilos fuente están realmente escritos en Sass. Usando esta técnica, podemos definir nuestros valores de color de tema en Sass, compilar los estilos en un archivo CSS y permitir a los consumidores de nuestra biblioteca de componentes aprovechar las mismas variables de color que estábamos usando en Sass, pero a través de CSS. Los consumidores de nuestra biblioteca de componentes incluyen nuestro CSS en su aplicación y ¡voilà! Muy genial.
Valores de Reserva (Fallback Values) en var()
El primer argumento de la función es el nombre de la propiedad personalizada a sustituir. El segundo argumento de la función, si se proporciona, es un valor de reserva, que se utiliza como valor de sustitución cuando la propiedad personalizada referenciada no es válida. El navegador primero busca --red. El navegador recurre al siguiente hasta que está satisfecho. ¡Y obtienes un fondo verde. Interesante!
Como se mencionó, ni siquiera sabía que se podían tener este tipo de valores de reserva. Para ser honesto, todavía no estoy seguro de cuáles serían las circunstancias que harían necesario usarlos. No me he encontrado en una situación en la que pensé: "Ojalá tuviera un valor de reserva para esta propiedad personalizada...". De todos modos, el comentario de Ryan sobre la sintaxis aquí también me intrigó. ¿Cómo sabe el navegador que debe tomar un valor delimitado por comas como 0, 0, 255 como el valor de reserva completo? ¿No deberías agrupar esos valores de alguna manera, como entre comillas? ¡Ah! Así que cuando encuentra esa primera coma, toma todo desde ahí hasta el final como el valor de reserva. Eso tiene mucho sentido porque las variables CSS deberían poder contener comas.
Espera, entonces ¿cómo especificarías un valor de reserva para un valor de reserva? La respuesta es: anidas sentencias var(). ¿Por qué es esto? Recuerda, el navegador toma todo lo que está después de la primera coma como el valor de reserva. Entonces, si quieres otra variable, después de la primera coma tienes que poner otra sentencia var(). El navegador primero busca --red. Si no lo encuentra, busca todo lo que está después de la primera coma, que en este caso es --green, 0, 0, 255 y ese no es un valor válido en CSS.
Lea también: Guía IVA reducido
El Futuro de los Colores en CSS
La capacidad de desestructurar los canales individuales de cualquier color dado está llegando en forma de colores relativos de CSS. Incluso puedes aprovechar calc() para aumentar o disminuir los canales individuales, como el canal de luminosidad en hsl().
Convenciones de Nomenclatura para Colores
¿Cómo podrías elegir nombres para los colores? Podrías divertirte con cómo llamar a un amarillo soleado versus un amarillo girasol, o simplemente podrías querer ayuda. Desde mis habilidades para nombrar cosas en HTML, sabía que debía evitar clases como .header-blue-left-bottom porque el color y la posición de ese elemento podrían cambiar. Pero descubrí que nunca los recordaba y tenía que consultar constantemente dónde los definía para usarlos. Descubrí que eso era mucho más intuitivo con pocos o ningún efecto secundario negativo. En gran medida, he mantenido ese enfoque de "simplemente usar nombres de colores" hoy en día en Sass. Otro enfoque que a menudo he visto es combinar nombres de colores con nombres abstractos. ¡Material Design utiliza valores similares a font-weight!
Lea también: ¿Cómo localizar tus XML del SAT?