¿Qué son las variables CSS y cómo usarlas?

Publicado: 2022-02-16

Al escribir el código CSS para su sitio, puede utilizar las propiedades personalizadas de CSS (variables) para acelerar el proceso de desarrollo. Puede usar variables para definir propiedades (tamaño, color), que luego se pueden aplicar a varios elementos.

De esa forma, es posible tener más control sobre el código y el diseño. Alterar el valor de una variable en un lugar anula el valor de esa propiedad en todas partes donde se invoca.

Esta publicación explicará cómo usar las variables CSS y algunas aplicaciones prácticas.

¡Empecemos!

Declaración de una variable

Las variables pueden tener alcance global o local. Para definir una variable globalmente, utilice el selector :root.

 :root { --base-font-size: 1.1rem; }
ABRIR EN EMERGENTE
 :root { --base-font-size: 1.1rem; }

El selector :root coincide con la raíz del documento, es decir, <html> en nuestro caso particular.

Para declarar una propiedad personalizada de CSS (variable), comience con dos guiones (--). Las variables distinguen entre mayúsculas y minúsculas, por ejemplo:

--base-font-size y --Base-Font-Size son dos variables diferentes.

Para definir una variable localmente, utiliza el selector del elemento en el que desea utilizar la variable.

 #first-container { --background: #ccc; }
ABRIR EN EMERGENTE
 #first-container { --background: #ccc; }

Una vez definida la variable, es necesario invocarla.

La función var()

La función var() se utiliza para insertar el valor de la variable CSS definida. La función se reemplaza con el valor de la variable. Echemos un vistazo a un ejemplo:

El código HTML

  • Copie y pegue este código en su editor de código.
  • Guarde el archivo como index.html .
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
ABRIR EN EMERGENTE
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

¿Qué son las variables CSS y cómo usarlas?

El código CSS

  • Cree un archivo llamado style.css (en el mismo directorio de index.html ).
  • Pegue el código a continuación y guarde el archivo.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
ABRIR EN EMERGENTE
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

¿Qué son las variables CSS y cómo usarlas?

Hay algunas cosas a tener en cuenta aquí:

  1. Crear una paleta de colores es un proceso sencillo.
  2. Es posible utilizar una variable dentro de la definición de otra variable, como el color en la definición de las variables de borde.
  3. Las variables se heredan, la propiedad de color del elemento .container-* afecta a sus hijos directos. En este caso, el elemento <p>.

Para anular una variable, la declara dentro de su contenedor, haciéndola más específica.

  • Edite el código CSS:
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
ABRIR EN EMERGENTE
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

¿Qué son las variables CSS y cómo usarlas?

Consultas de variables y medios

Las variables también se pueden heredar y anular en las consultas de medios CSS.

  • Agregue este código a las variables:
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
ABRIR EN EMERGENTE
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

Hemos definido un ancho base para el elemento contenedor. Ahora podemos aplicar estas variables a la propiedad .wrapper width.

  • Agregue este código al final del archivo CSS:
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
ABRIR EN EMERGENTE
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

¿Qué son las variables CSS y cómo usarlas?

Para definir una consulta de medios para dispositivos con pantallas de menos de 1100 px de ancho, escribimos la siguiente consulta de medios.

  • Edite el código CSS:
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
ABRIR EN EMERGENTE
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

¿Qué son las variables CSS y cómo usarlas?

¿Qué son las variables CSS y cómo usarlas?

La nueva definición de variable dentro de la consulta de medios anula su valor. Tenga en cuenta también que la variable está disponible en el DOM, lo que significa que se puede recuperar y manipular con JS. Eso no es posible con variables dentro de los preprocesadores CSS.

Resumen

Las variables son útiles para organizar y gestionar pequeñas y grandes cantidades de CSS. Reducen la repetición y por lo tanto previenen errores. Las variables CSS son dinámicas, lo que significa que se pueden modificar en tiempo de ejecución. Es fácil crear un tema de un sitio o una aplicación dinámicamente con variables CSS. Brindan la capacidad de asignar valores a una propiedad CSS con un nombre personalizado. Las variables siguen las reglas de cascada estándar, por lo que es posible definir la misma propiedad en diferentes niveles de especificidad.

Espero que les haya gustado este tutorial. ¡Gracias por leer!