10.1 Declaración de variables
Las variables en CSS, también conocidas como propiedades personalizadas (CSS Custom Properties), permiten a los desarrolladores guardar valores de propiedades en un solo lugar y reutilizarlos en el documento. Esto hace que el CSS sea más flexible y manejable, especialmente cuando se trabaja en proyectos grandes.
Declaración de variables
Las variables en CSS se declaran usando dos guiones (--) antes del nombre de la variable.
Generalmente, se declaran dentro del selector :root, para hacerlas accesibles en todo el documento.
Sintaxis:
:root {
--nombre-variable: valor;
--nombre-variable: valor;
}
Ejemplo:
En este ejemplo se declaran tres variables: --main-color, --secondary-color, y --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Uso de variables
Para usar variables se aplica la función var(), que toma el nombre de la variable como argumento.
Sintaxis:
selector {
propiedad: var(--nombre-variable);
propiedad: var(--nombre-variable);
}
Ejemplo:
Este ejemplo utiliza las variables declaradas anteriormente para estilizar el fondo, el color del texto y el tamaño de la fuente del elemento <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Herencia y reescritura de variables
Las variables CSS se heredan a lo largo de la jerarquía de elementos. Esto significa que si una variable se declara en un elemento, estará disponible también para sus elementos hijos. Las variables también se pueden reescribir dentro de otros selectores.
Ejemplo:
En este ejemplo, el elemento .header reescribe la variable --main-color, y esta nueva variable
se aplica solo a él. Al mismo tiempo, el elemento .footer usa el valor de la variable,
declarada en :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Ventajas de usar variables CSS
1. Simplificación de la gestión de estilos:
Las variables permiten cambiar el valor de una propiedad en un solo lugar, y este cambio se aplica automáticamente a todos los lugares donde se usa esta variable. Esto es especialmente útil para la tematización y el mantenimiento de un estilo coherente.
2. Mejora de la legibilidad y el mantenimiento del código:
Usar variables hace que el código CSS sea más legible y comprensible, ya que pueden usarse para describir
valores como colores y tamaños que pueden tener un significado semántico
(por ejemplo, --main-color en lugar de #3498db).
3. Actualización dinámica de estilos:
Las variables pueden ser cambiadas dinámicamente usando JavaScript, lo que permite crear interfaces de usuario más interactivas y dinámicas.
GO TO FULL VERSION