Pasar al contenido principal

🔥 ¡Hoy! Clase gratis de Diseño web con Bootstrap 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Las variables CSS son una realidad y te explico como usarlas

Las variables CSS ya son compatibles con todos los navegadores así que puedes empezar a usarlas hoy mismo en tus proyectos. En este artículo te explico como.

Las variables CSS son una realidad y te explico como usarlas

¡CSS por fin tiene variables! En realidad las tiene desde hace un par de años, pero como siempre el soporte nos limitaba a usarlas en proyectos reales. Pues bien, en 2018 el soporte es total (solo IE no lo soporta, pero Edge sí) y ya no tenemos excusas.

El uso de variables CSS es muy sencillo:

/* Las variables deben declararse dentro de un selector
   Se acostumbra usar :root para que la variable sea global 
   Se declaran con dos guiones y el nombre
   Para utilizarlas se usa la funcion var() y entre
   los paréntesis se escribe el nombre de la variable

*/

:root {
  --my-color: red
}

body {
  color: var(--my-color)
}

El nombre exacto es Custom properties aunque no está mal decirles variables (hasta la W3C las llama variables). Pero ¿por qué se llaman custom properties y no variables? Son dos las razones:

  • El valor es heredado a los hijos
  • El valor puede redefinirse por cascada

Estos dos conceptos (cascada y herencia) son muy propios de las propiedades CSS y no tienen relación con el comportamiento de una variable en ningún lenguaje de programación.

Veamos el caso de la herencia con el ejemplo anterior

:root {
  --my-color: red
}

body {
  color: var(--my-color)
}

/* En este caso todos los textos (párrafos, títulos, etc.)
   serán de color rojo por herencia, porque descienden de 
   body al resto de elementos (comportamiento propio de CSS)
*/

Ahora el caso de la cascada con el mismo ejemplo

:root {
  color: red
}

body {
  color: var(--color)
}

h1 {
  --color: blue;
}

/* En este caso todos los textos (párrafos, títulos, etc.)
   serán de color rojo por herencia, pero todos los h1 serán
   azules porque hemos usado la cascada para redefinir el valor
   de la propiedad personalizada --color
*/

Scope de las variables CSS

El scope de una variable es el contexto en el cual existe y puede ser invocada. Por ejemplo, la mayoría de lenguajes de programación tienen scope de bloque (conjunto de expresiones encerradas entre llaves). Ejemplo:

{
  let miVariable = 'Hola mundo'
  console.log(miVariable) // 'Hola mundo'
}

console.log(miVariable) // Error, miVariable no está definida

Las variables CSS, en cambio, no tienen scope de bloque sino que, por la herencia, son utilizables en cualquier hijo o descendiente (en el DOM) del elemento en el que fueron declaradas. Es por eso que si queremos que una variable sea global (que sea accesible desde cualquier lugar del proyecto) la declaramos en la pseudoclase :root que apunta al elemento más alto del DOM <html></html> pero tiene más especificidad que el selector de etiqueta.

Esto significa que las variables CSS existen en el DOM por lo cual pueden ser leidas y manipuladas con JavaScript con los métodos getComputedStyle(element) y element.style.setProperty() además que son accesibles desde las dev tools del navegador lo que les da un poder enorme en el diseño web.

Imagen de variables css en las dev tools del navegador

Domina las variables CSS como un experto

He creado un curso para que domines las variables CSS y las uses hoy mismo en tus proyectos. Te enseñaré:

  • Declarar y utilizar variables CSS
  • En qué casos son válidas y en qué casos no
  • Aprovechar la cascada y la herencia de las variables CSS
  • Variables CSS vs variables Sass (en qué caso usar cada una)
  • Responsive web design con variables CSS
  • Manipular variables CSS con JavaScript (ejercicio indicador de scroll y ejercicio selector de color RGB)
  • Crear tema claro y oscuro para un mismo sitio y cambiar de tema con un botón.

Enlace: Curso Variables CSS

¡Nos vemos en clase!

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal