2.1 Declaración de variables CSS
Las variables CSS, también conocidas como propiedades personalizadas (Custom Properties), permiten definir valores que se pueden usar múltiples veces en diferentes partes del código CSS. Facilitan enormemente la gestión de estilos y aumentan su flexibilidad.
Las variables CSS se declaran con un doble guión (--) y pueden establecerse en cualquier selector. Sin embargo, para asegurar la accesibilidad de las variables en todo el documento, a menudo se definen en el selector raíz :root.
Sintaxis:
selector {
--nombre-de-variable: valor;
}
Ejemplo:
En este ejemplo se declaran cuatro variables: --main-bg-color, --main-text-color, --primary-color, y --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Uso de variables CSS
Para usar el valor de una variable se aplica la función var(), que toma el nombre de la variable como argumento.
Sintaxis:
selector {
propiedad: var(--nombre-de-variable);
}
Ejemplo:
En este ejemplo se utilizan los valores de las variables para definir el color de fondo, el color del texto, el tamaño de fuente y el color de los enlaces.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Ejemplos de uso de variables CSS
Ejemplo 1: Uso básico de las variables
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Resultado:
- El fondo de la página será gris claro
- El texto será gris oscuro
- El tamaño de la fuente será de 16 píxeles
- Los enlaces serán de color azul
Ejemplo 2: Reasignación de variables en componentes específicos
Las variables CSS pueden ser reasignadas para elementos o componentes específicos, proporcionando flexibilidad en la estilización:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Reasignación de la variable */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
Resultado:
- El fondo del encabezado será azul, y el texto será gris claro
- El fondo del pie de página será rojo (variable reasignada), y el texto será gris claro
Ejemplo 3: Uso de variables en combinación con otros valores
Las variables CSS se pueden combinar con otros valores y funciones CSS:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
Resultado:
- El contenedor tendrá relleno y márgenes establecidos por las variables
2.3 Uso de variables CSS en JavaScript
Ejemplo de uso de variables CSS en JavaScript
Las variables CSS se pueden cambiar dinámicamente mediante JavaScript, permitiendo adaptar estilos en tiempo real:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Explicación:
Al hacer clic en el botón se cambian los valores de las variables --bg-color y --text-color, lo que lleva a cambiar el color de fondo y el texto de la página.
GO TO FULL VERSION