Guía de inicio rápido de variables CSS (casos de uso, sintaxis y ejemplos)

He estado experimentando con variables CSS durante bastante tiempo. Si aún no se ha acercado a ellos, puede usar esta breve guía para orientarse rápidamente y ponerse a trabajar.

Que es esto

Un ejemplo de aplicación simple para botones con alcance

Las variables CSS le permiten definir valores reutilizables en CSS.

Aparecieron hace mucho tiempo. Recientemente, han comenzado a ganar popularidad debido a un soporte de navegador más amplio.

Si utiliza un preprocesador, como SASS, ya está familiarizado con las variables. Ahora puede hacer lo mismo sin un preprocesador.

¿Por qué usar variables de estilo?

Las variables nos permiten adherirnos al principio de SECO (no se repita). Gracias a ellos, también tenemos una manera de crear un único punto de referencia para valores duplicados. Si utiliza un preprocesador, lo más probable es que las ventajas de este enfoque ya le sean familiares. Muy a menudo, esto se usa para establecer el color base, que se usa para muchos elementos.


Repita el color de fondo para múltiples selectores

En el fragmento anterior, el valor de #e74c3c podría y debería ser una variable. Si hacemos una variable a partir de este valor, obtenemos un único punto al que se puede hacer referencia. Esto reduce el riesgo de errores y problemas de estilo, ya que facilita el mantenimiento adicional.


Crear un punto de referencia usando una variable

En el segundo fragmento, utilizo un preprocesador para mostrar cómo puede usar una variable para el valor de background-color .

¿Por qué no usar variables de preprocesador en lugar de variables CSS nativas?

Buena pregunta En la mayoría de los casos, preferirá permanecer comprometido con las variables del preprocesador. Esto es así si ya los está utilizando. Pero puede aprovechar ambos enfoques a la vez. Esto se vuelve relevante cuando se hace necesario utilizar completamente las capacidades de las variables CSS nativas. Más sobre esto más tarde.

Las variables nativas de CSS deben usarse cuando:

1. No tiene un preprocesador o no lo usa.
2. Desea aprovechar las variables CSS nativas.

Beneficios clave de las variables CSS nativas

En mi opinión, las variables CSS nativas tienen dos grandes ventajas.

El primero ¡Se actualizan en tiempo de ejecución! Se pueden controlar mediante consultas de medios, estados o incluso JavaScript. El navegador aplicará los cambios realizados. Esto abre muchas posibilidades.

Además, las variables CSS permiten el alcance. Esto significa que, por ejemplo, puede cambiar el estilo o el comportamiento de un elemento actualizando el valor de una variable. De lo contrario, debe registrar nuevos estilos para este elemento desde cero. Como resultado, el volumen de CSS en la salida disminuye.

No es la sintaxis más bella

Veamos un ejemplo.



¿Qué es un :root pseudo :root ? Todo es lógico: es un pseudo-selector de la raíz de un árbol. El selector :root puede usarse para definir variables globales. En este caso, definimos el valor rebeccapurple para la variable --primary .



Para definir una variable, se usan dos guiones como prefijo.



Para usar una variable, necesitamos la función var .

¿Y qué sucede cuando nos referimos a una variable cuyo valor no está establecido? En este caso, puede establecer valores de reserva o valores predeterminados. La función var admite un segundo parámetro opcional, que corresponde a valores de reserva o valores predeterminados.



Este fragmento establece el estilo de origen para la etiqueta del button . Siempre que sea posible para background-color , --btn-color el valor --btn-color . Si la variable no existe o el valor no está establecido, --primary el valor --primary .

No hay necesidad de usar una variable para nuestro respaldo. Puedes tomar el valor. Pero con las variables será más fácil implementar el soporte de código.

Tenga en cuenta que no se declaran estilos para button.btn . En cambio, el valor se actualiza. Ahora es apropiado pasar a cascada y alcance.

Cascada y alcances

Cuando se trabaja con variables, se tiene en cuenta la cascada, así como el alcance de las variables. En el ejemplo anterior, las variables se declaran en :root pseudoclase :root . Todas las variables en el selector :root tienen alcance global.

En un ejemplo anterior, --primary estaba disponible para todos los selectores. Debido al alcance, este valor puede anularse. Por ejemplo, queremos que el valor --primary cambie para la clase premium .



En este fragmento, el valor de la variable --primary de un elemento de clase premium es dodgerblue . Es decir, si no se aplica ninguna clase al button , el valor de la variable es rebeccapurple . Sin embargo, si aplica la clase premium , el color cambia a dodgerblue .

Vale la pena señalar que, al igual que con los estilos en línea, las variables CSS en línea tienen la máxima prioridad.



En este fragmento, el color de fondo del botón se establecerá en red , a pesar de que aquí se usa la clase premium . Esto sucede porque el valor --primary describe directamente en la etiqueta.

Gestión del valor

Puede controlar los valores de las variables CSS utilizando otras reglas CSS. Los enfoques principales son consultas de medios y cambios de estado.

Por ejemplo, el valor de una variable puede cambiar cuando el ancho de la pantalla excede un cierto valor.



El cambio iniciará el redibujo del navegador y mostrará el resultado al usuario.

En este caso, el gradiente de fondo cambiará si el ancho excede los 768px .

¿Cómo gestionar variables usando estados? Por ejemplo, tomar el button . La variable CSS se actualizará en función del estado del button .



En este caso, puede personalizar el estilo del botón según el estado :active .

Administrar valores usando JavaScript

Administrar variables desde CSS es muy conveniente. Pero para obtener realmente el control sobre ellos, debe controlarlos usando JavaScript. Afortunadamente, esto es real.

El método setProperty permite establecer y administrar variables de estilo de elemento.



¿Cómo actualizar la variable establecida en :root pseudoclase :root ? Buena pregunta Deberá establecer las propiedades del documentElement para documentElement .



Cuando puede manipular variables CSS de esta manera, hay muchas posibilidades. Curioso sobre el seguimiento de la posición del cursor con el evento mousemove .

Usando calc () y descartando unidades

Intenta no usar unidades en variables. Esto facilitará más mantenimiento.



La función calc() permite normalizar y establecer valores con las unidades deseadas.



Las variables CSS incluso se pueden usar para almacenar información sobre unidades preferidas. Para mayor claridad, tomamos "1px" en el fragmento, pero puede reemplazarlo con "1pt", "1rem", etc.

La falta de unidades suele ser más relevante cuando los valores se establecen desde JavaScript. Al procesar valores puros, nuestro script se extrae de CSS. La conexión está rota.



Cuando las unidades están contenidas en CSS, el servicio también pasa a través de CSS.

Ejemplos de aplicación

Todavía estoy estudiando varios ejemplos de uso de variables CSS. En primer lugar, me viene a la mente una temática dinámica. El seguimiento del cursor y el desplazamiento de la pantalla también son aplicaciones interesantes. He preparado materiales de capacitación, que se pueden encontrar a continuación.

Ejemplo con un perro y una pelota.

¡Trabajemos un ejemplo juntos!



Aquí simplemente rastreamos la posición del cursor y actualizamos la posición de los dos emojis.



Lo principal aquí es transferir emojis desde un punto central utilizando translate y al mismo tiempo aplicar transition-delay al perro.

¿Cómo actualizar la situación? Usando variables para --x y --y .



¿Cómo hacer que el perro se quede atrás? transition-delay se aplica. También se puede lograr un efecto de desaceleración complejo utilizando transition-timing-function .



Solo resta actualizar estas variables para mousemove .



Eso es todo Un par de mejoras menores más, y algo así resulta:

Desventajas

Hasta ahora, trabajar con variables CSS ha sido bastante sencillo. Raramente encuentro situaciones en las que algo no funcionó. Aquí hay algunas posibilidades que me gustaría ver para las variables CSS.

1. Animación de variables. En este artículo, no hablé sobre animación en absoluto. Puedes usar variables para ello. Pero la animación de los valores en sí no se puede hacer.
2. Las variables CSS no se pueden usar en selectores. Esto es lógico, pero sería genial si tal nivel de interpolación estuviera disponible. Usar variables en el selector n-child sería genial.

Conclusión

Me gusta trabajar con variables CSS. Cuanto más los hago, más ejemplos de aplicación me vienen a la mente.

Gracias a este artículo, usted mismo puede comenzar a aprender variables CSS.

Si está interesado en obtener una descripción más detallada de las variables CSS, vea este video .

LOOKING.HOUSE : el proyecto recolectó más de 150 puntos de espejo en 40 países. Puede ejecutar rápidamente los comandos host, ping, traceroute y mtr.