Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. CSS3
Code

Propiedades Personalizadas con CSS: Variables

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las variables siempre están presentes en todos los lenguajes de programación, y esto es así debido a su gran utilidad. Solo tienes que almacenar una valor una única vez en una variable , y después podrás usarla múltiples veces, evitando repeticiones. Aunque CSS no es un lenguaje de programación, la falta de variables todavía limita sus capacidades.

Ahora que disponemos de variables en CSS, me gustaría explicar en qué se diferencia con respecto a las variables que proporcionan los preprocesadores CSS y mostrar cómo funcionan las primeras.

Ventajas de las Propiedades Personalizadas

La sintaxis para usar las propiedades personalizadas es un poco ampulosa, y algunos desarrolladores podrían encontrarla "fea". Un factor más que desanima la adopción del uso de las variables nativas es el soporte existente por las variables Sass.

Aunque los preprocesadores como Sass admiten variables, estos todavía tienen algunas limitaciones que discutiremos en esta sección.

Puedes actualizar las variables del preprocesador basándote en media queries. Para crear un sitio web responsivo, necesitarás cambiar valores basados en las dimensiones de las pantallas. Las variables de los preprocesadores no pueden hacerlo. Por ejemplo, considera el siguiente código:

Será compilado como sigue:

Como puedes ver, lo indicado en la media query es completamente ignorado. Sin embargo, las variables CSS sí respetarán lo indicado por la media query.

De igual manera, las variables del preprocesador no funcionan en cascada ni se heredan. Usando variables nativas, podrías evitar todas estas limitaciones Otra ventaja importante de usar variables nativas es que son interoperables. A diferencia de las variables Sass, que sólo funcionan con Sass, las variables nativas funcionarán no sólo con todos los preprocesadores sino también en archivos con CSS puro.

Sintaxis y Uso

Para entender a usar las propiedades personalizadas CSS, empecemos con un ejemplo básico:

Siempre que definas una propiedad personalizada, debes empezar definiendo su ámbito de acción. Este ámbito determina los nodos del Dom para los que la propiedad personalizada estará disponible. El uso de :root implica que la propiedad personalizada está disponible para todos los elementos. No olvides que todas las propiedades tienen que empezar con dos guiones.

Si intentas usar una propiedad personalizada, tendrás que hacer referencia a ella mediante la función var().  Esta función toma dos argumentos; el primero es la propiedad personalizada en sí, y el segundo es un valor es una solución alternativa. El valor alternativo se usa para cuando la propiedad personalizada no está declarada por ninguno de los antecesores o su valor no es válido. 

Debes darte cuenta de que las propiedades personalizadas distinguen entre mayúsculas y minúsculas. Esto implica que --text-color , --Text-Color, y --text-Color son todos diferentes.

Hay algunas otras cosas más que debes recordar al usar var().

Lo primero es que los valores alternativos pueden separarse mediante comas, y en el caso de valores abreviados como margen, no tienes que separar los valores individuales con una coma. Por ejemplo, var(--para-font-family, "Lato", "Roboto"); indica que el valor alternativo es "Lato" "Roboto";. De igual forma, una alternativa para la propiedad borde sería: 

Lo segundo es que no puedes usar las variables como nombres para las propiedades.  El código siguiente te mostrará un error en la segunda declaración.

Establecer Valores Con Calc()

Habiendo cubierto lo básico, veamos como podemos construir valores a partir de las propiedades personalizadas. Si has establecido apenas algunos números a las variables, no serás capaz de adjuntarlos directamente a alguna unidad para obtener un valor válido. Abreviando, el siguiente código no es válido:

Tendrás que usar la función calc() para realizar algunos cálculos y construir unos valores CSS al final. Para hacer funcionar el código anterior, tendrás que modificarlo para que sea como sigue:

No estás limitado al usar únicamente unidades px. Puedes usar todas las unidades válidas disponibles en CSS.

Usar Variables Con JavaScript

Las variables nativas CSS también pueden interactuar con JavaScript. Para obtener sus valores, puedes usar el código siguiente:

trim() eliminará los espacios en blanco a ambos lados de tus valores.

Si quieres establecer el valor de una propiedad personalizada, tendrás que usar el método setProperty().

La variable --background a vuelto ahora. También puedes establecer una propiedad personalizada para hacer referencia a otra a través de la función var().

La anterior declaración es completamente válida y establece que el valor de --h-color es igual a --p-color.

Cambiar los Temas Dinámicamente

s variables pueden proporcionar mucha flexibilidad a la hora de cambiar los temas basándonos en las preferencias de los usuarios. Con anterioridad, tenías que aplicar estilo en línea o incrustar múltiples hojas de estilo.  Ambos métodos tenías sus propios inconvenientes. Crear varias hojas de estilo es un dolor de cabeza, y usar estilo en línea es una mala práctica.  Las variables pueden proporcionar una forma sencilla de solucionar esta situación. Aquí tienes un poco de JavaScript básico para cambiar los temas dinámicamente. 

El código de arriba conecta un evento de clic al botón de nuestro tema. Tan pronto como alguien pulse sobre él, la función greenTheme() establecerá los valores de algunas variables para cambiar el aspecto general de la web. Como puedes ver, el método ha sido mucho más fácil de implementar que las otras dos soluciones.

Puedes intentar añadir más variables o crear más temas en esta muestra de CodePen.

Conclusión

El tutorial parece sugerir que las variables CSS nativas son mejores que las variables de los preprocesadores como Sass, pero no es mi intención subestimar la utilidad de los preprocesadores.  El empleo de varios preprocesadoress CSS aumenta la productividad. Tienen mucho más que ofrecer que simplemente variables. Muchas de las funciones que integran, loops, y declaraciones condicionales pueden hacernos conseguir cosas con mucha rapidez.  

Este tutorial simplemente destaca que aunque las variables nativas tienen una sintaxis rara, todavía tienen mucho que ofrecer y merece la pena que las usemos en nuestros proyectos. Si tienes preguntas relativas a este tutorial, cuéntamelo en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.