Variables CSS y Propiedades Personalizadas
## Objetivos de Aprendizaje
- Entender las propiedades personalizadas de CSS
- Definir y usar variables CSS
- Crear temas mantenibles
- Dominar la sintaxis de var() y valores de respaldo
## Introducción
Las propiedades personalizadas de CSS (variables) te permiten almacenar valores para reutilizarlos:
```css
:root {
--color-primaria: #007bff;
--font-size-base: 16px;
}
.button {
background-color: var(--color-primaria);
font-size: var(--font-size-base);
}
```
## Definir Variables
### Ámbito Global
```css
:root {
--color-primario: #007bff;
--color-secundario: #6c757d;
--espaciado-sm: 0.5rem;
--espaciado-md: 1rem;
--espaciado-lg: 2rem;
}
```
### Ámbito Local
```css
.card {
--card-padding: 20px;
padding: var(--card-padding);
}
```
## Usando Variables
### Uso Básico
```css
:root {
--color-marca: #007bff;
}
h1 {
color: var(--color-marca);
}
.button {
background-color: var(--color-marca);
}
```
### Con Valores de Respaldo
```css
.elemento {
color: var(--color-texto, #333);
font-size: var(--font-size, 16px);
margin: var(--espaciado, 1rem);
}
```
### Múltiples Respaldo
```css
.elemento {
margin: var(--margen-personalizado, var(--margen-por-defecto, 20px));
}
```
## Nomenclatura de Variables
```css
:root {
/* Usa nombres descriptivos */
--color-texto-primario: #333;
--color-fondo-body: #f5f5f5;
--espaciado-seccion: 2rem;
/* Usa kebab-case */
--font-size-grande: 1.25rem;
--border-radius-pequeno: 4px;
/* Prefijo para evitar conflictos */
--btn-padding: 10px 20px;
--header-height: 60px;
}
```
## Actualizaciones Dinámicas
### Acceso con JavaScript
```javascript
// Obtener variable
const color = getComputedStyle(document.documentElement)
.getPropertyValue('--color-primario');
// Establecer variable
document.documentElement.style.setProperty('--color-primario', '#ff6600');
```
### Cambios en CSS
```css
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #333333;
}
```
## Tematización
### Tema Base
```css
:root {
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;
--color-warning: #ffc107;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--spacing: 1rem;
--border-radius: 0.25rem;
}
```
### Tema Oscuro
```css
[data-theme="dark"] {
--color-bg: #1a1a1a;
--color-text: #f0f0f0;
--color-border: #333;
--color-primary: #4d9fff;
--color-bg-card: #2a2a2a;
}
```
### Tematización de Componentes
```css
.button {
--btn-bg: var(--color-primary);
--btn-color: white;
--btn-padding: 0.5rem 1rem;
background-color: var(--btn-bg);
color: var(--btn-color);
padding: var(--btn-padding);
}
.button--secondary {
--btn-bg: var(--color-secondary);
}
.button--large {
--btn-padding: 1rem 2rem;
}
```
## Ejemplo Práctico
```css
:root {
/* Colores */
--hue: 200;
--saturation: 100%;
--lightness: 50%;
--primary: hsl(var(--hue), var(--saturation), var(--lightness));
--primary-light: hsl(var(--hue), var(--saturation), 70%);
--primary-dark: hsl(var(--hue), var(--saturation), 30%);
/* Tipografía */
--font-base: 16px;
--font-scale: 1.25;
--font-size-sm: calc(var(--font-base) / var(--font-scale));
--font-size-md: var(--font-base);
--font-size-lg: calc(var(--font-base) * var(--font-scale));
--font-size-xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale));
/* Espaciado */
--space-unit: 1rem;
--space-xs: calc(var(--space-unit) * 0.25);
--space-sm: calc(var(--space-unit) * 0.5);
--space-md: var(--space-unit);
--space-lg: calc(var(--space-unit) * 2);
--space-xl: calc(var(--space-unit) * 4);
/* Sombras */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}
body {
font-size: var(--font-base);
margin: var(--space-md);
}
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
```
## Soporte de Navegadores
```css
/* Respaldo para navegadores antiguos */
.button {
background-color: #007bff; /* Respaldo */
background-color: var(--primary);
}
```
## Resumen
- Variables CSS: `--nombre-variable: valor;`
- Definir en `:root` para ámbito global
- Usar sintaxis `var(--nombre)` o `var(--nombre, respaldo)`
- Actualizaciones dinámicas vía CSS o JavaScript
- Excelente para tematización y sistemas de diseño
- Siempre proporcionar respaldos para mejor soporte de navegadores
- Usar convenciones de nomenclatura descriptivas en kebab-case
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →