1.1 ¿Qué son las variables CSS?
Las variables CSS, también conocidas como propiedades personalizadas (custom properties), son variables declaradas en CSS, que pueden usarse para almacenar valores como colores, tamaños, fuentes y otros atributos CSS. Ofrecen capacidades efectivas para mejorar la flexibilidad y mantenibilidad de estilos en las páginas web.
¿Qué son las variables CSS?
Las variables CSS son variables que pueden almacenar valores de propiedades CSS y reutilizarse en varias partes de los estilos. Se definen con guiones dobles (--), y pueden establecerse en cualquier selector, pero más comúnmente se definen en el selector raíz :root para hacerlas accesibles en todo el documento.
Ejemplo:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Características principales de las variables CSS:
- Reutilización: Las variables CSS permiten definir un valor una vez y usarlo múltiples veces en diferentes partes del código CSS. Esto ayuda a evitar duplicación y simplifica la gestión de estilos.
- Flexibilidad: los valores de las variables CSS pueden cambiar dependiendo de condiciones como el estado del elemento o media queries. Esto permite crear estilos más adaptativos y dinámicos.
- Herencia: las variables CSS se heredan de elementos padre a hijos, lo que simplifica la gestión y organización de estilos.
- Mantenibilidad: el uso de variables facilita el mantenimiento del código, ya que los cambios en los valores de las variables se reflejan automáticamente en todos los elementos que las utilizan.
1.2 Ejemplos de uso de variables CSS
Ejemplo de uso de variables CSS en JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Ejemplo 1: Definición y uso de variables
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Este es un párrafo.</p>
<a href="#">Este es un enlace</a>
</body>
Explicación:
- En este ejemplo se definen tres variables:
--main-bg-color,--main-text-colory--primary-color - Estas variables se usan para establecer el color de fondo, texto y enlaces
1.3 Cambiando valores de variables en JavaScript
En este ejemplo, las variables se usan para establecer el tema de la página. Al hacer clic en un botón, los valores de las variables cambian, lo que lleva a cambiar el fondo y el color del texto:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Cambiar Tema</button>
<p>Este es un párrafo.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION