Hoy vamos a hablar de variables en CSS, una nueva funcionalidad propia de un lenguaje de programación incorporada en CSS nativo o CSS puro que como sabes no es un lenguaje de programación si no un lenguaje de hojas de estilo.
¿Que es una Variable?
Las variables son pequeños espacios en la memoria de un programa donde podemos guardar información.
En CSS en este caso, podríamos guardar colores, fuentes, medidas, y cualquier cosa que luego queramos volver a utilizar a lo largo de nuestra hoja de estilos.
Ejemplos de variables en CSS
Ahora veremos con ejemplos como se definen y se utilizan las variables en CSS.
Para definir una variable en CSS deberíamos hacerlo de esta manera:
:root{
--color-principal: #ccc;
}
Usamos el selector :root, que sería la raíz del documento.
Luego con doble guion indicamos que es una variable y le ponemos el nombre que queramos, en este caso esa variable guarda un color, pero podría guardar cualquier cosa.
Para usar la variable se haría esto:
.texto{
color: var(--color-principal);
}
Utilizamos la función var y dentro le ponemos el nombre de la variable que queramos utilizar.
La ventaja de usar las variables es que solo tendríamos que cambiar el color en un sitio y se cambiara en toda la web, si no usáramos variables, tendríamos que ir selector por selector cambiando el color en este caso.
Con esto ya sabemos usar las variables de CSS.
Nos seguimos viendo en mis cursos de desarrollo, en este blog y en mi canal de YouTube 😉
